suchen

Heim  >  Artikel  >  Web-Frontend  >  Detaillierte Erläuterung der Anwendungsbeispiele der Wrapper-Set-Methode get() und der Methode index() in jQuery

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

伊谢尔伦
伊谢尔伦Original
2017-06-19 14:19:491943Durchsuche

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 a1f02c36ba31691bcfe87b2722de723b-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 bb9345e55eb71822850ff156dfde57c8-Elemente auf der Seite, denen ein bb9345e55eb71822850ff156dfde57c8 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]);

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">
JQuery-Code

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

[ <img src="2.jpg" /><img src="2.jpg">]
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

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

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>

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!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Detaillierte Einführung in die jQuery-AuswahloperationsmethodeNächster Artikel：Detaillierte Einführung in die jQuery-Auswahloperationsmethode

In Verbindung stehende Artikel

Mehr sehen