Explication détaillée des exemples d'utilisation de la méthode wrapper set get() et de la méthode index() dans jQuery

jquery permet à l'ensemble empaqueté d'être traité comme un tableau javascript Vous pouvez utiliser des indices de tableau simples pour obtenir n'importe quel élément de la séquence empaquetée par position.

Par exemple, pour obtenir le premier élément de l'ensemble de tous les éléments de la page avec l'attribut alt, vous pouvez écrire :

$('img[alt]')[0]

Si vous préférez Utiliser des méthodes au lieu d'indices de tableau, vous pouvez utiliser la méthode get() définie par jquery pour atteindre votre objectif.

get syntaxe : get(index)

Obtenir un ou tous les éléments correspondants dans l'ensemble d'emballage. Si aucun paramètre n'est spécifié, tous les éléments de l'ensemble de packages seront renvoyés sous la forme d'un tableau JavaScript ; si un paramètre d'indice est spécifié, l'élément correspondant à l'indice sera renvoyé.

$("img[alt]").get(0)

est équivalent à l'exemple précédent d'utilisation d'indices de tableau, c'est-à-dire : $("img[alt]")[0]. La méthode get() peut également être utilisée pour convertir l'ensemble de wrapper d'éléments en un tableau JavaScript normal. Pensez :

var allLabeledButtons = $("lable+button").get();

Cette instruction encapsule tous les éléments . Accédez au wrapper jquery, puis créez un tableau javascript composé de ces éléments et affectez-le à la variable allLableedButtons

Vous pouvez utiliser l'opération inverse pour obtenir l'indice d'un élément spécifique dans l'ensemble du paquet. Supposons que, pour une raison quelconque, vous souhaitiez connaître l'index d'ordre de l'image avec l'identifiant findMe dans l'intégralité de l'ensemble d'images sur la page, vous pouvez utiliser l'instruction suivante pour obtenir l'index

var n = $("img").index($('img#findMe')[0]);

Copier après la connexion

index() syntaxe : index(element)

Trouver l'élément entrant dans l'ensemble d'emballage et renvoyer l'indice d'ordre de l'élément dans l'ensemble d'emballage, si l'élément n'est pas dans l'ensemble d'emballage, renvoyer -1

jquery get ()Fonction obtient la collection de tous les éléments DOM correspondants. Vous pouvez directement utiliser l'objet DOM au lieu de l'objet JQuery. Sa valeur de retour est un tableau d'éléments<. 🎜>

Exemple : sélectionnez le document. Toutes les images sont disposées en tant qu'éléments et le tableau est inversé à l'aide de la méthode inverse intégrée du tableau.

code html

<img src="1.jpg" /><img src="2.jpg">

Copier après la connexion

code jquery

$("img").get().reverse();

Copier après la connexion

result

[ <img src="2.jpg" /><img src="2.jpg">]

Copier après la connexion

la méthode get(index) consiste à obtenir le position correspondante L'élément correspondant, l'élément correspondant d'index, vous permet de sélectionner un élément DOM réel et d'opérer dessus directement, plutôt que via les fonctions jQuery. $(this).get(0) est équivalent à $(this)[0]. Méthode

index() : La valeur de retour est de type numéro

recherche les éléments correspondants et renvoie la valeur d'index correspondante, en commençant par 0. Si aucun paramètre n'est transmis au .index( ), alors la valeur de retour est la position du premier élément de cette collection d'objets jQuery par rapport à ses éléments frères. Si le paramètre est un ensemble d'éléments DOM ou d'objets jQuery, la valeur de retour est la position de l'élément transmis par rapport à l'ensemble d'origine. Si le paramètre est un sélecteur, la valeur de retour est la position de l'élément d'origine par rapport à l'élément correspondant par le sélecteur. Si aucun élément correspondant n'est trouvé, -1 est renvoyé.

code html

foo 
bar 
baz

Copier après la connexion

code jquery

$('li').index(document.getElementById('bar')); //1，传递一个DOM对象，返回这个对象在原先集合中的索引位置
$('li').index($('#bar')); //1，传递一个jQuery对象
$('li').index($('li:gt(0)')); //1，传递一组jQuery对象，返回这个对象中第一个元素在原先集合中的索引位置
$('#bar').index('li'); //1，传递一个选择器，返回#bar在所有li中的做引位置
$('#bar').index(); //1，不传递参数，返回这个元素在同辈中的索引位置。

Copier après la connexion

Regardons un exemple :

<!DOCTYPE html>
<html>
<head>
  <style>
  b, span, p, html body {
    padding: .5em;
    border: 1px solid;
  }
  b { color:blue; }
  strong { color:red; }
  </style>
  <script type="text/javascript" src="/jquery/jquery.js"></script>
</head>

<body>
  <p>
    <p>
      <span>
        <b>我的父元素是：</b>
      </span>
    </p>
  </p>

<script>
var parentEls = $("b").parents()
            .map(function () { 
                  return this.tagName; 
                })
            .get().join(", ");
$("b").append("<strong>" + parentEls + "</strong>");
</script>

</body>
</html>

Copier après la connexion

Le résultat est comme indiqué ci-dessous Affichage :

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!