Définir l'index via jquery

Définir l'index via jquery

Dans le développement Web, il est souvent nécessaire d'obtenir ou de définir la position d'un élément parmi les éléments frères, ce qui nécessite l'utilisation d'un index. jQuery fournit une méthode très pratique pour obtenir ou définir l'index d'un élément.

1. Obtenez l'index de l'élément

Par exemple, dans la structure de code suivante, nous devons obtenir l'index de l'élément li :

<ul>
  <li>第一个</li>
  <li>第二个</li>
  <li>第三个</li>
</ul>

Obtenir l'index en utilisant jQuery est très simple, utilisez simplement index() method:

$("li").click(function(){
  var index = $(this).index();
  alert(index);
});

This La signification de ce code est la suivante : lorsque l'on clique sur l'élément li, obtenez sa position dans l'élément frère et alertez-le.

2. Définir l'index d'un élément

Parfois, il est nécessaire de changer dynamiquement la position d'un élément parmi les éléments frères. Par exemple, la position actuelle de l'élément li est 2 et je souhaite la changer en 1.

<ul>
  <li>第一个</li>
  <li>第三个</li>
  <li>第二个</li>
</ul>

À ce stade, vous pouvez utiliser la méthode after() ou before() fournie par jQuery pour réaliser :

$("li:eq(2)").after($("li:eq(0)"));

La signification de ce code est : déplacer l'élément d'index 2 (le troisième) vers l'élément avec index 0 (le premier), c'est-à-dire que la position d'implémentation devient 1.

En plus d'utiliser la méthode after() ou before(), vous pouvez également utiliser la méthode appendTo() ou prependTo(). Par exemple, je veux déplacer le troisième élément li vers l'avant :

$("li:eq(2)").prependTo($("ul"));

Ce que ce code signifie est : ajoutez l'élément d'index 2 (le troisième) à l'ul, mais mettez-le au premier plan, c'est-à-dire l'implémentation la position devient 0.

Résumé :

Vous pouvez facilement obtenir ou définir la position d'un élément via jQuery. Choisir la méthode appropriée en fonction de vos besoins peut mieux implémenter la fonction.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!