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

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

WBOY

Freigeben： 2016-05-16 16:32:02

Original

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