Heim >Web-Frontend >js-Tutorial >Der Unterschied zwischen nth-child(N)- und eq(N)-Selektoren in JQuery

Der Unterschied zwischen nth-child(N)- und eq(N)-Selektoren in JQuery

黄舟
黄舟Original
2017-06-23 14:04:242726Durchsuche

1. nth-child(N): Der Index beginnt bei 0

2. nth-child(N): Wählen Sie mehrere Elemente aus; ): Wählen Sie ein Element

3. nth-child(N): Wählen Sie in einem Dokumentenbaum alle Elemente mit dem N-ten Rang in jeder Ebene aus.
Beispiel: n-tes Kind(2): umfasst das zweite Kind des Vaters, das zweite Kind des Bruders und den grünen Teil im Bild unten

Der Unterschied zwischen nth-child(N)- und eq(N)-Selektoren in JQuery

eq( N): Wählen Sie in einem Dokumentbaum nach der Sortierung in der Vorreihenfolge das N-te Element und alle seine Unterelemente aus.
Beispiel: Sehen Sie sich im folgenden HTML-Code die Ergebnisse von $("div:eq(3)").html() an. (Die Zahl ist die Zahl in der vorherigen Sequenz)

<div>0  
    <div>1  
        <div>div_a_2</div>  
        <div>3  
            <div>div_b_4</div>  
            <div>div_c_5</div>  
        </div>  
        <div>div_d_6</div>  
    </div>  
    <div>7  
        <div>div_e_8</div>  
    </div>  
    <div>9  
        <div>10  
            <div>div_f_11</div>  
        </div>  
        <div>div_g_12</div>  
    </div>  
</div>

$("div:eq(3)").html() Auswahlergebnis

Der Unterschied zwischen nth-child(N)- und eq(N)-Selektoren in JQuery

Denken Sie abschließend über eine Frage nach:

$(&#39;div:nth-child(odd)&#39;).css("color","red");  
$(&#39;div:nth-child(even)&#39;).css("color","blue");

Wird die Schriftfarbe aller Divs anhand der beiden obigen Sätze in roten und blauen Abständen angezeigt? Die Antwort ist natürlich: nein
Der Test ist wie folgt, der Codeteil:

  
  
  
  
      
  
  
<div>0  
    <div>1  
        <div>div_a_2</div>  
        <div>3  
            <div>div_b_4</div>  
            <div>div_c_5</div>  
        </div>  
        <div>div_d_6</div>  
    </div>  
    <div>7  
        <div>div_e_8</div>  
    </div>  
    <div>9  
        <div>10  
            <div>div_f_11</div>  
        </div>  
        <div>div_g_12</div>  
    </div>  
</div>  
  

Laufergebnisse:

Der Unterschied zwischen nth-child(N)- und eq(N)-Selektoren in JQuery

Das obige ist der detaillierte Inhalt vonDer Unterschied zwischen nth-child(N)- und eq(N)-Selektoren 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