Adopting Variable Values From Html Data-atributes

*EDIT I have a list in my HTML called '#wordlist'. In this list I hold the words in my game, the attached audio and the attached image to each word. This all works fine. Because th

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');
    }