Obtenir un élément par index en jQuery

Question

J'ai une liste non ordonnée et l'index d'un élément de la liste. li dans cette liste. Je dois récupérer le li en utilisant cet indice et changer sa couleur de fond. Est-ce possible sans faire tourner la liste entière en boucle ? Je veux dire, y a-t-il une méthode qui pourrait réaliser cette fonctionnalité ?

Voici mon code, qui, je pense, 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>

Answer 1

$(...)[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 css fonction, utilisez la dernière...

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

docs :

.get(index) Retourne : Élément

• Description : Récupère les éléments du DOM correspondant à l'objet jQuery.
• Voir : https://api.jquery.com/get/

.eq(index) Retourne : jQuery

• Description : Réduit l'ensemble des éléments appariés à celui qui se trouve à l'index spécifié.
• Voir : https://api.jquery.com/eq/

Answer 2

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

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

Answer 3

Vous pouvez utiliser le méthode ou sélecteur d'éq. :

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

Answer 4

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

<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électionneurs que vous pouvez utiliser avec jQuery pour faire correspondre tout élément dont vous avez besoin.

Answer 5

Vous pourriez sauter le jquery et utiliser simplement 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>