Modifier nième li dans une liste en utilisant jquery

Question

J'essaie quelque chose de très basique, mais je n'arrive pas à comprendre pourquoi cela ne marchera pas. Je peux obtenir des informations sur l'objet en utilisant [i] mais je ne peux pas changer les données de cette façon?

// Make all the li's invisible 
$('div#rotator ul li').css({opacity: 0.0}); 

// Calculate a random number between 1 and 3 
var randnr = Math.floor((1-4)*Math.random()) + 4; 

for(var i = 0; i < $('#rotator ul li').length; i++) { 

      // Make the i element appear 
    $('#rotator ul li')[i].css({opacity: 1.0}); 
} 

Answer 1

objets jQuery sont des objets en forme de matrice qui peuvent être utilisés comme une matrice d'éléments DOM premières.
Par conséquent, $(...)[i] obtient le i'th élément DOM brut, pas un objet jQuery le contenant.

Pour obtenir un objet jQuery contenant l'élément i'th, appelez le .eq() method, comme ceci:

$('#rotator ul li').eq(i).css({opacity: 1.0}); 

Vous pouvez également utiliser le :eq selector:

$('#rotator ul li:eq(i)').css({opacity: 1.0}); 

---

Cependant, vous n'a pas besoin de boucle du tout; vous pouvez masquer tous les éléments à la fois:

$('div#rotator ul li').css({opacity: 1.0}); 

Answer 2

Vous obtenez ce problème parce que quand vous utilisez des indices de tableau que vous obtenez un élément DOM et css() est une méthode sur un objet jQuery. Ainsi, vous pouvez faire:

$($("#rotator ul li")[i]).css("opacity", 1.0); 

Bien sûr, c'est gênant pour que vous puissiez utiliser eq():

$("#rotator ul li").eq(i).css("opacity", 1.0); 

Mais vous faites ce changement dans tous les éléments de l'ensemble donc une solution plus simple qu'une boucle est simplement faire:

$("#rotator ul li").css("opacity", 1.0); 

qui s'appliquera le CSS à tous les éléments de l'objet jQuery.