Obtenir un élément par index dans jQuery

117

J'ai une liste non ordonnée et l'index d'une libalise dans cette liste. Je dois obtenir l' liélément en utilisant cet index et changer sa couleur d'arrière-plan. Est-ce possible sans boucler la liste entière? Je veux dire, y a-t-il une méthode qui pourrait atteindre cette fonctionnalité?

Voici mon code, qui, je crois, fonctionnerait ...

<script type="text/javascript">
  var index = 3;
</script>

<ul>
    <li>India</li>
    <li>Indonesia</li>
    <li>China</li>
    <li>United States</li>
    <li>United Kingdom</li>
</ul>

<script type="text/javascript">
  // I want to change bgColor of selected li element
  $('ul li')[index].css({'background-color':'#343434'});

  // Or, I have seen a function in jQuery doc, which gives nothing to me
  $('ul li').get(index).css({'background-color':'#343434'});
</script>
jquery dom get Rama Rao M
la source
3
Les deux façons dont vous l'utilisez renvoient des éléments dom plutôt que des objets jQuery afin que l'appel à .css ne fonctionne pas sur eux. La réponse de Darius ci-dessous en utilisant l'eq est ce que vous voulez.
Richard Dalton

Réponses:

257 
$(...)[index]      // gives you the DOM element at index
$(...).get(index)  // gives you the DOM element at index
$(...).eq(index)   // gives you the jQuery object of element at index

Les objets DOM n'ont pas de cssfonction, utilisez le dernier ...

$('ul li').eq(index).css({'background-color':'#343434'});

docs:

.get(index) Renvoie: Element

.eq(index) Renvoie: jQuery

  • Description: réduisez l'ensemble des éléments correspondants à celui de l'index spécifié.
  • Voir: https://api.jquery.com/eq/
gdoron soutient Monica
la source
19

Vous pouvez utiliser la .eq()méthode de jQuery pour obtenir l'élément avec un certain index.

$('ul li').eq(index).css({'background-color':'#343434'});
Christofer Eliasson
la source
12

Vous pouvez utiliser la méthode eq ou le sélecteur :

$('ul').find('li').eq(index).css({'background-color':'#343434'});
Darius
la source
1
Vous auriez pu simplifier le sélecteur avec $('ul li').eq(index).css({'background-color':'#343434'});
gdoron soutient Monica
1
Mais dans la plupart des navigateurs, le sélecteur $('ul').find('li')est plus rapide. [1 , 2 ]
Darius
1

Il existe une autre façon d'obtenir un élément par index dans jQuery en utilisant la :nth-of-typepseudo-classe CSS :

<script>
    // css selector that describes what you need:
    // ul li:nth-of-type(3)
    var selector = 'ul li:nth-of-type(' + index + ')';
    $(selector).css({'background-color':'#343434'});
</script>

Il existe d'autres sélecteurs que vous pouvez utiliser avec jQuery pour correspondre à tout élément dont vous avez besoin.

Yury Fedorov
la source
-1

Vous pouvez ignorer la jquery et simplement utiliser le balisage de style CSS:

 <ul>
 <li>India</li>
 <li>Indonesia</li>
 <li style="background-color:#343434;">China</li>
 <li>United States</li>
 <li>United Kingdom</li>
 </ul>
Adam H
la source