Adottando valori variables da attributi di dati HTML

Prima di tutto, il tuo html non era affatto bene, devi cambiarlo a questo:

(gli attributi dei data sono stati corretti …)

HTML:

 <ul id="wordlist"> <li data-audio="" data-pic="images/one.png" data-word="one" data-number-input="" data-completion-number="" data-grid=""></li> <li data-audio="" data-pic="images/two.png" data-word="two" data-number-input="" data-completion-number="" data-grid=""></li> <li data-audio="" data-pic="images/three.png" data-word="three" data-number-input="" data-completion-number="" data-grid=""></li> <li data-audio="" data-pic="images/four.png" data-word="four" data-number-input="" data-completion-number="" data-grid=""></li> <li data-audio="" data-pic="images/five.png" data-word="five" data-number-input="" data-completion-number="" data-grid=""></li> <li data-audio="" data-pic="images/six.png" data-word="six" data-number-input="" data-completion-number="" data-grid=""></li> <li data-audio="" data-pic="images/seven.png" data-word="seven" data-number-input="" data-completion-number="" data-grid=""></li> <li data-audio="" data-pic="images/eight.png" data-word="eight" data-number-input="" data-completion-number="" data-grid=""></li> </ul>​ 

Quindi, per assegnare nuovi valori agli attributi dei data , utilizzare quanto segue. In questo caso ho influenzato solo il primo li ma puoi fare un loop o .map() in jQuery se vuoi cambiarli tutti.

Live DEMO: http://jsfiddle.net/oscarj24/qWyj6/1/

Codice jQuery:

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

Modifica di tutti gli attributi li :

basta farlo usando jQuery, questo è come l'equivalente di un loop :

Live DEMO: http://jsfiddle.net/oscarj24/qWyj6/2/

(Nella console live del browser di controllo demo per visualizzare l'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); });​ 

Se vuoi get l'attributo di data da un li e metti in una variabile, fai semplicemente:

 //Getting 'number-input' attribute from the first 'li': var numberInput = $('ul#wordlist li').eq(0).data('number-input'); 

Ma, se vuoi get tutti gli attributi di data da tutti i li e inserirli in variables o object javascript, fai semplicemente:

 var data = $('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/

Questa sarà l'output:

E per esempio, per esempio, il valore di number-input dal primo li di questo object , fai semplicemente:

 console.log(data[0].numberInput); 

Spero che questo ti aiuti 🙂

Esempio non testato, get each istanza di * data- * numero-input e spingerla in una matrix:

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