Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch
Heim > Web-Frontend > js-Tutorial > Hauptteil

Die Verwendung von .each() in JQuery zum Durchlaufen von Elementen untersucht NOTES_JQuery

WBOY
Freigeben： 2016-05-16 16:32:02
Original
1221 Leute haben es durchsucht

Wenn Sie heute einen Tab schreiben, müssen Sie .each() in jquery verwenden, um die Nummer des li-Elements abzurufen, indem Sie den Indexparameter in every() abrufen, um die Anzeige des folgenden Blocks zu erleichtern Seite Ok, der folgende Code:

Code kopieren Der Code lautet wie folgt:





tab






          

                                                                             & Lt; li class = "titsh" & gt; option 1 & lt;/li & gt;
                                                                                                                                                                                                                                                  
  • Option 2

    •                                                                                                                                                                                                                                                 
  • Option 3

    •                                                                                                                                                                                                                                           
  • Option 4

    •                                                                                                                                                                                                                  

                                            
    Content 1

                                                                                                                                                                                                                                  & Lt; div





    Die Testergebnisse waren normal. Als ich es später auf einer tatsächlichen Seite verwendete, stellte ich fest, dass sich die Div-Blöcke unten bei verschiedenen Blöcken nicht änderten Andere Stile auf der Seite waren in Konflikt geraten. Nachdem ich alle CSS-Selektoren in eindeutige geändert hatte, stellte ich fest, dass das Problem weiterhin bestand, und kam daher zu dem Schluss, dass es hier sein sollte:

    Code kopieren Der Code lautet wie folgt:

    $("#title .titsh").removeClass("titsh");
    $("#content .consh").removeClass("consh");
    $(this).addClass("titsh");
    $("#content>div:eq(" index ")").addClass("consh");

    Es ist kein Problem, die Stile im ersten und zweiten Satz zu entfernen. Im dritten Satz ist es normal, den CSS-Stil von titsh zum aktuellen li-Tag hinzuzufügen erhalten durch div: eq (index) Beim Hinzufügen von Stilen zum Block ist ein Fehler aufgetreten.

    Hier bin ich also:

    Code kopieren Der Code lautet wie folgt:

    $("li").each(function(index){
    $(this).mouseover(function(){

    Ich habe zwischen diesen beiden Sätzen ein Warn- (Index-) Popup-Fenster eingefügt. Als ich mir den Effekt ansah, stellte ich fest, dass die Indexwerte von mehr als 10 Li-Tags angezeigt wurden Es gab tatsächlich andere Li-Tags auf dieser Seite. Daher entspricht der von every() iterierte Indexwert nicht dem Indexwert des Div-Blocks unten. Wenn sich also das Li-Tag oben ändert, ändert sich der Div-Block unten nicht Dementsprechend habe ich den js-Code geändert:

    Code kopieren Der Code lautet wie folgt:



    Einschränkungen für den Selektor des li-Elements hinzugefügt, das mit .each() iteriert werden muss, sodass er nur das li-Tag in meiner Registerkarte finden kann, um jeweils den Indexwert zu erhalten. Das Problem ist gelöst, und ich kann geh schlafen!

    Verwandte Etiketten：
    jquery
    Quelle：php.cn
    Vorheriger Artikel：Tutorial zur Verwendung von style.cssText in JavaScript_Javascript-Kenntnissen Nächster Artikel：Einführung in die Eigenschaften und Anwendungsszenarien von Node.js_node.js
    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
    Neueste Artikel des Autors
    Aktuelle Ausgaben
    Formular ohne Schaltfläche mit Javascript/Jquery senden Ich versuche, ein Formular ohne Schaltfläche zu senden, indem ich eine JavaScript-Funktion...
    Aus 2024-04-06 14:54:03
    0
    2
    421
    So rufen Sie Werte nicht ausgewählter Zeilen in einer HTML-Datentabelle mithilfe von JQuery ab Ich versuche, den Wert aller Zeilen zu ermitteln, in denen nicht auf die Schaltfläche gekl...
    Aus 2024-04-05 09:26:49
    0
    1
    1418
    Benötigen Sie ein JQuery-Skript, um ausgewählte Optionen basierend auf der aktuellen Auswahl des Endbenutzers aus einem Auswahlfeld zu verschieben Ich habe eine HTML-Seite, auf der der Endbenutzer unsere Artikel über ein Auswahlfeldeleme...
    Aus 2024-04-04 18:40:04
    0
    1
    3528
    Ich habe über Lesezeichen ein Element in reinem CSS erstellt. Es ist erstellt, aber nicht sichtbar Mein Code lautet wie folgt: g=document.createElement('div');g.setAttribute("id",...
    Aus 2024-04-04 17:27:27
    0
    1
    417
    Formulardaten können nicht auf Safari/Firefox iOS gesendet werden Dies funktioniert auf allen Plattformen außer Safari/Firefox unter iOS: jQuery("#gfor...
    Aus 2024-04-04 12:53:48
    0
    1
    303
    verwandte Themen
    Mehr>
    Beliebte Empfehlungen
    Beliebte Tutorials
    Mehr>
    Verwandte Tutorials
    Beliebte Empfehlungen
    Aktuelle Kurse
    Neueste Downloads
    Mehr>
    Web-Effekte
    Quellcode der Website
    Website-Materialien
    Frontend-Vorlage