get value from url parameter to replace html 5 data attribute

Question

I've this div:

<div id="accordion-63-52453407315c8" 
     class="wk-accordion wk-accordion-default clearfix"  
     data-widgetkit="accordion"
     data-options='{"style":"default", 
                    "collapseall":1, 
                    "matchheight":0, 
                    "index":-1, 
                    "duration":500, 
                    "width":"auto", 
                    "order":"default"}'>

How I could change index value in data-option attribute, from a parameter get by url string using Jquery code?

www.myurl.com?index=4

Answer 1

How about:

var obj = $("#accordion-63-52453407315c8").data("option");
var index = obj.index;

Answer 2

Let's approach this problem with the following two steps:

1. We need to retrieve the index from the url.
2. We need to update the value in the `data-options` attribute.

Let's do those now.

Get the Index:

var url = window.location.href;
var index = null;
if(url.lastIndexOf('?') != -1) {
    index = url.split('?')[1];
    index= index.split('=')[1];
}

Modify the data attribute:

var $accordian = $('#accordion-63-52453407315c8');
var obj = $accordian.data("options");
obj.index = parseInt(index);
$accordian.data("options", obj);

Here is a fiddle demonstrating how this works.

Hope this helps.

Answer 3

Working DEMO

Try this

Add this to your head for getting the query string

 <script src='https://rawgithub.com/allmarkedup/purl/master/purl.js'>
 </script> 

and the code is

 var index1=$.url('http://www.myurl.com?index=4').param('index');
    $('#accordion-63-52453407315c8').data('options').index=index1; //assigning value to the index 

if you want to get the parameter from the current url

 var index1=$.url(window.location.href).param('index');
 $('#accordion-63-52453407315c8').data('options').index=index1;