Heim > Web-Frontend > js-Tutorial > Hauptteil

Wie durchquere ich jQuery? Eine kurze Analyse mehrerer Traversalmethoden

青灯夜游
Freigeben: 2022-02-24 10:51:39
nach vorne
5706 Leute haben es durchsucht

Wie durchquere ich jQuery? Der folgende Artikel wird Ihnen verschiedene jQuery-Möglichkeiten zum Durchlaufen von Objekten vorstellen. Ich hoffe, er wird Ihnen hilfreich sein!

Wie durchquere ich jQuery? Eine kurze Analyse mehrerer Traversalmethoden

Mehrere Arten der jQuery-Durchquerung

Wir alle wissen, dass die js-Durchquerungsmethode ist: for (Initialisierungswert; Schleifenendbedingung; Schrittgröße) Zum Beispiel:

 for (var i = 0; i < 3; i++) {//循环体}
Nach dem Login kopieren

jQuery-Durchquerung hat die folgenden Verwendungen:

1. jq object.each(callback) oder selector.each(callback)[Empfohlenes Lernen: jQuery-Video-Tutorial]

Der Rückgabewert von callback wird am Ende erklärt

1.1. Die Rückruffunktion benötigt keine Parameter (*Hinweis: Diese Art von Rückruf ohne Parameter kann nur jedes Elementobjekt in der Sammlung abrufen, nicht jedoch den entsprechenden Indexwert, und das Objekt kann nur dadurch abgerufen werden)

-> Syntax: jquery object.each(function(){});

//html
<ul id="course">
    <li>js</li>
    <li>java</li>
    <li>C++</li>
    <li>jq</li>
</ul>
Nach dem Login kopieren
//实例
$("button").click(function(){
  $("#course li").each(function(){
    alert($(this).html());//jq获取方式
    alert(this.innerHTML);//js获取方式
  });
});
Nach dem Login kopieren

1.2. Callback-Funktion mit Parametern (*Sie können den Indexindex abrufen, und es gibt zwei Möglichkeiten, das Elementobjekt abzurufen)

->Syntax: jquery object.each(function(index,element){});

  • index: ist der Index des Elements in der Sammlung
  • element: ist jedes Elementobjekt in der Sammlung
  • dies: in der Sammlung Jedes Elementobjekt von
//实例
  $("#course li").each(function (index, item) {
			//3.1 获取 li对象 第一种方式 this
            //alert(this.innerHTML);//js获取
            //alert($(this).html());//jq获取
            /*3.2 获取 li对象 第二种方式
             在回调函数中定义参数 index(索引)item(元素对象)*/
           // alert(index+":"+item.innerHTML);
            alert(index+":"+$(item).html());
}
Nach dem Login kopieren

2. jQuery.each(object, [callback])

Der Rückgabewert von callback wird am Ende erklärt

2.1 Die Rückruffunktion benötigt keine Parameter (* und 1.1. Der Effekt ist ähnlich, das Objekt kann nur dadurch erhalten werden)

-> Syntax: $.each(object, function(){});

$.each($("#course li"),function () {
              //alert($(this).html());//jq获取方式
   			  alert(this.innerHTML);//js获取方式
         });
Nach dem Login kopieren

2.2 . Callback-Funktion mit Parametern (*Sie können den Index index, ähnlich wie 1.2, aber anders geschrieben, wie folgt erhalten)

->

    index: ist der Index des Elements in der Sammlung.
  • item: Es ist jedes Elementobjekt in der Sammlung.
  • this: Jedes Elementobjekt in der Sammlung nach jquery 3.0 Version
  • (*verstehen)

​ - > Syntax: für (Elementobjekt des Containerobjekts)

$.each($("#course li"),function (index,item) {
             //3.1 获取 li对象 第一种方式 this
           // alert(this.innerHTML);//js获取
           // alert($(this).html());//jq获取
            /*3.2 获取 li对象 第二种方式
             在回调函数中定义参数 index(索引)item(元素对象)*/
            //alert(index+":"+item.innerHTML);
            alert(index+":"+$(item).html());
         });
Nach dem Login kopieren
4. Problem mit dem Rückgabewert der Rückruffunktion (betrifft das erste und das zweite):

(*Ergänzung)

true: Wenn die aktuelle Funktion false zurückgibt, endet die Schleife (Unterbrechung). false: Wenn die aktuelle Funktion „true“ zurückgibt, beenden Sie diese Schleife und setzen Sie die nächste Schleife fort (weiter)

    Zum Beispiel:
  •    for (li of $("#course li")) {
                alert($(li).html());
            }
    Nach dem Login kopieren
    (Lernvideo-Sharing:
  • Web-Frontend
  • )

    Das obige ist der detaillierte Inhalt vonWie durchquere ich jQuery? Eine kurze Analyse mehrerer Traversalmethoden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:csdn.net
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!