Adopting Variable Values From Html Data-atributes
Solution 1:
First of all, your html
wasn't good at all, you must change it to this:
(data
attributes were corrected...)
HTML:
<ulid="wordlist"><lidata-audio=""data-pic="images/one.png"data-word="one"data-number-input=""data-completion-number=""data-grid=""></li><lidata-audio=""data-pic="images/two.png"data-word="two"data-number-input=""data-completion-number=""data-grid=""></li><lidata-audio=""data-pic="images/three.png"data-word="three"data-number-input=""data-completion-number=""data-grid=""></li><lidata-audio=""data-pic="images/four.png"data-word="four"data-number-input=""data-completion-number=""data-grid=""></li><lidata-audio=""data-pic="images/five.png"data-word="five"data-number-input=""data-completion-number=""data-grid=""></li><lidata-audio=""data-pic="images/six.png"data-word="six"data-number-input=""data-completion-number=""data-grid=""></li><lidata-audio=""data-pic="images/seven.png"data-word="seven"data-number-input=""data-completion-number=""data-grid=""></li><lidata-audio=""data-pic="images/eight.png"data-word="eight"data-number-input=""data-completion-number=""data-grid=""></li></ul>
Then, to assign new values to the data
attributes, use the following. In this case I just affected the first li
but you can do a loop
or .map()
in jQuery if you want to change all of them.
Live DEMO:http://jsfiddle.net/oscarj24/qWyj6/1/
jQuery code:
var numberInput = 2;
var completionNumber = 2;
var smallGrid = {
x: 4,
y: 4
};
//In this case, this is just affecting the first 'li' inside 'ul' that's why '.eq(0)' is used.
elem = $('ul#wordlist li').eq(0);
elem.data('number-input', numberInput.toString());
elem.data('completion-number', completionNumber.toString());
elem.data('grid', smallGrid.x + ',' + smallGrid.y);
//Print new 'data' attributes in console to look they've changed.
console.log(elem.data('number-input'));
console.log(elem.data('completion-number'));
console.log(elem.data('grid'));
Changing all li
attributes:
just do this using jQuery, this is like the "equivalent" of a loop
:
Live DEMO:http://jsfiddle.net/oscarj24/qWyj6/2/
(In live demo check browser's console to see the output)
$('ul#wordlist li').map(function(i, v) {
$(this).data('number-input', numberInput.toString());
$(this).data('completion-number', completionNumber.toString());
$(this).data('grid', smallGrid.x + ',' + smallGrid.y);
});
If you want to get the data
attribute from a li
and put in a variable, just do this:
//Getting 'number-input' attribute from the first 'li':
var numberInput = $('ul#wordlist li').eq(0).data('number-input');
But, If you want to get all data
attributes from all li
and put them in variables or javascript object
, just do this:
vardata = $('ul#wordlist li').map(function(i, v) {
var numberInput = $(this).data('number-input');
var completionNumber = $(this).data('completion-number');
var gridX = $(this).data('grid').split(',')[0];
var gridY = $(this).data('grid').split(',')[1];
return {
numberInput: numberInput,
completionNumber: completionNumber,
grid: {
x: gridX,
y: gridY
}
};
}).get();
Live DEMO:http://jsfiddle.net/oscarj24/qWyj6/3/
This will be the output:
And, to get for example the number-input
value from the first li
of this object
, just do this:
console.log(data[0].numberInput);
Hope this helps :-)
Solution 2:
Untested example, get each instance of *data-*number-input and push it into an array:
var numberInputs = [];
var list = document.getElementByID('wordlist');
var listItems = list.getElementsByTagName('li');
for(var i = 0;i<listItems.length;i++) {
numberInputs.push = listItems[i].getAttribute('data-number-input');
}
Post a Comment for "Adopting Variable Values From Html Data-atributes"