Detaillierte Erläuterung der Anwendungsbeispiele der Wrapper-Set-Methode get() und der Methode index() in jQuery

jquery ermöglicht die Verarbeitung des gepackten -Sets als Javascript-Array Sie können einfache Array-Indizes verwenden, um jedes Element in der gepackten Sequenz nach Position abzurufen.

Um beispielsweise das erste Element aus der Menge aller -Elemente auf der Seite mit dem Alt-Attribut zu erhalten, können Sie Folgendes schreiben:

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

Wenn Sie Bevorzugen Sie Methoden anstelle von Array-Indizes. Sie können die von jquery definierte Methode get () verwenden, um Ihr Ziel zu erreichen.

get-Syntax: get(index)

Ein oder alle passenden Elemente im Paketsatz abrufen. Wenn keine Parameter angegeben werden, werden alle Elemente im Paketsatz in Form eines JavaScript-Arrays zurückgegeben. Wenn ein Indexparameter angegeben wird, wird das dem Index entsprechende Element zurückgegeben.

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

entspricht dem vorherigen Beispiel der Verwendung von Array-Indizes, also: $("img[alt]")[0]. Die get()-Methode kann auch verwendet werden, um den Element-Wrapper-Satz in ein normales Javascript-Array umzuwandeln:

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

Diese Anweisung umschließt alle -Elemente auf der Seite, denen ein vorangestellt ist ;label>-Elemente. Gehen Sie zum JQuery-Wrapper, erstellen Sie dann ein Javascript-Array, das aus diesen Elementen besteht, und weisen Sie es der Variablen allLableedButtons zu.

Sie können die Umkehroperation verwenden, um den Index eines bestimmten Elements im zu erhalten Paketsatz. Angenommen, Sie möchten aus irgendeinem Grund den Ordnungsindex des Bildes mit der ID findMe im gesamten Bildsatz auf der Seite wissen. Sie können die folgende Anweisung verwenden, um den Index

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

Nach dem Login kopieren

index() abzurufen Syntax: index(element)

Suchen Sie das eingehende Element im Verpackungssatz und geben Sie den Bestellindex des Elements im Verpackungssatz zurück. Wenn das Element nicht im Verpackungssatz enthalten ist, geben Sie -1 zurück

jquery get ()Funktion ruft die Sammlung aller passenden DOM-Elemente ab. Sie können das DOM-Objekt anstelle des JQuery-Objekts direkt bedienen 🎜>

Beispiel: Wählen Sie das Dokument aus. Alle Bilder werden als Elemente angeordnet, und die Anordnung wird mithilfe der integrierten Umkehrmethode der Anordnung umgekehrt.

HTML-Code

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

Nach dem Login kopieren

JQuery-Code

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

Nach dem Login kopieren

Ergebnis

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

Nach dem Login kopieren

get(index)-Methode dient zum Abrufen der entsprechende Position Das passende Element, das index-te passende Element, ermöglicht es Ihnen, ein tatsächliches DOM-Element auszuwählen und es direkt zu bearbeiten, anstatt über jQuery-Funktionen. $(this).get(0) entspricht $(this)[0].

index()-Methode: Der Rückgabewert ist vom Typ Nummer, sucht nach

passenden Elementen und gibt den entsprechenden Indexwert zurück, beginnend bei 0. Wenn keine Parameter an die .index( übergeben werden. )-Methode, dann ist der Rückgabewert die Position des ersten Elements in dieser Sammlung von jQuery-Objekten relativ zu seinen Geschwisterelementen. Wenn es sich bei dem Parameter um eine Menge von DOM-Elementen oder jQuery-Objekten handelt, ist der Rückgabewert die Position des übergebenen Elements relativ zur ursprünglichen Menge. Wenn der Parameter ein Selektor ist, ist der Rückgabewert die Position des ursprünglichen Elements relativ zu dem Element, mit dem der Selektor übereinstimmt. Wenn kein passendes Element gefunden wird, wird -1 zurückgegeben.
HTML-Code

JQuery-Code

foo 
bar 
baz

Nach dem Login kopieren

Sehen wir uns ein Beispiel an:

$('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，不传递参数，返回这个元素在同辈中的索引位置。

Nach dem Login kopieren

Das Ergebnis ist wie folgt unten angezeigt Anzeige:

<!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>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Anwendungsbeispiele der Wrapper-Set-Methode get() und der Methode index() in jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!