Obtenir un élément par index dans jQuery

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>

$(...)[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

• Description: récupérez les éléments DOM correspondant à l'objet jQuery.
• Voir: https://api.jquery.com/get/

.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/

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

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

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

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.

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>