jQuery count enfant divs

Question

<ul> 
    <li class="title" data-count="1" data-time="9000" data-title="unicorn"> 
    <li class="title" data-count="2" data-time="2000" data-title="giraffe"> 
    <li class="title" data-count="3" data-time="3000" data-title="dog"> 
    <li class="title" data-count="4" data-time="7000" data-title="cat"> 
    <li class="title" data-count="5" data-time="1000" data-title="dinosaur"> 
</ul> 

Comme vous pouvez le voir, le data-count="/" est juste un compteur. Avez-vous des idées pour automatiser cela avec jQuery, je n'ai pas d'idées. Merci pour les réponses les gars.

Je pense qu'une variable pourrait travailler avec quelque chose comme ceci:

var DivCount = X 
$('.title').attr('data-count', DivCount); 

PS: Je ne demande pas seulement pour le code libre, des suggestions sont les bienvenus!

Answer 1

Essayez ceci:

var a = $("ul li"); 
 

 
jQuery.each(a, function(i, v) { 
 
    $(v).attr("data-count", i + 1); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li class="title" data-time="9000" data-title="unicorn">A</li> 
 
    <li class="title" data-time="2000" data-title="giraffe">B</li> 
 
    <li class="title" data-time="3000" data-title="dog">C</li> 
 
    <li class="title" data-time="7000" data-title="cat">D</li> 
 
    <li class="title" data-time="1000" data-title="dinosaur">E</li> 
 
</ul>

Documentation pour jQuery.each

Answer 2

Nettoyer un ...

for(var i = 1; i <= $('.title').length; i++) { 
    $('.title').attr('data-count', i); 
} 

... un autre ...

$('.title').each(function(i, element) { 
    $(element).attr('data-count', i + 1); 
}); 

Faites attention sur l'utilisation des noms de nœuds comme sélecteurs, dans le cas où vous avez d'autres listes.

Answer 3

Vous pouvez utiliser lenght propriétée pour compter combien d'éléments il y a dans un div:

console.log($("ul > li.title").length)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li class="title" data-count="1" data-time="9000" data-title="unicorn"> 
 
    <li class="title" data-count="2" data-time="2000" data-title="giraffe"> 
 
    <li class="title" data-count="3" data-time="3000" data-title="dog"> 
 
    <li class="title" data-count="4" data-time="7000" data-title="cat"> 
 
    <li class="title" data-count="5" data-time="1000" data-title="dinosaur"> 
 
</ul>

Answer 4

vous pouvez directement vérifier

$('li.title').length 

Il vous donnera li avec 'titre' de classe compte