jQuery: Anwendungsfall für den N-ten-Kind-Selektor

Übersicht

Entspricht dem N-ten untergeordneten oder gerade-ungerade-Element unter seinem übergeordneten Element.

':eq(index)' entspricht nur einem Element, und dieses entspricht dem untergeordneten Element für jedes übergeordnete Element Elementelement. :nth-child beginnt bei 1 und :eq() beginnt bei 0! Sie können Folgendes verwenden:
nth-child(even)
:nth-child(odd)
:nth-child(3n)
:nth-child(2):nth-child(3n+2)

Parameter

indexNumberV1.1.4

Zur Übereinstimmung mit der Sequenznummer des Elements, beginnend mit 1

Beispiel

Beschreibung:

Finden Sie das 2. li in jedem ul

HTML-Code:

<ul> 
<li>John</li> 
<li>Karl</li> 
<li>Brandon</li> 
</ul> 
<ul> 
<li>Glen</li> 
<li>Tane</li> 
<li>Ralph</li> 
</ul>

jQuery-Code:

$("ul li:nth-child(2)")

Ergebnis:

[ <li>Karl</li>, <li>Tane</li> ]

Dieser Selektor entspricht dem N-ten untergeordneten oder ungerade-gerade-Element unter seinem übergeordneten Element. Der
:eq(index)-Selektor stimmt nur mit einem Element überein, während der :nth-child-Selektor untergeordnete Elemente für jedes übergeordnete Element abgleicht.
:nth-child beginnt bei 1, während :eq() bei 0 beginnt.
Grammatikstruktur:

$(":nth-child")

Dieser Selektor wird im Allgemeinen in Verbindung mit anderen Selektoren verwendet, z. B. Klassenselektor, Elementselektor usw. . Beispiel:

$("li:nth-child(2)").css("color","blue")

Der obige Code kann die Schriftfarbe im zweiten li-Element unter dem übergeordneten Element auf Blau setzen. Sie können auch ungerade und gerade untergeordnete Elemente eines übergeordneten Elements berechnen. Beispiel:

$("li:nth-child(even)").css("color","blue")

Der obige Code kann die Schriftfarbe im geraden li-Element unter dem übergeordneten Element auf Blau setzen.

Hinweis: Das Konzept muss in Kombination mit dem obigen Code erläutert werden. Das hier erwähnte übergeordnete Element ist nicht li, sondern das übergeordnete Element von li.
Viele Leute denken oft fälschlicherweise, dass es das letzte Element in den untergeordneten Elementen ist, das mit dem li-Element übereinstimmt.

Beispielcode:

  

    
ASP教程
    
ASP.NET教程
    
;PHP教程
  
  

    
html教程
    
DIV+CSS教程
    
jQUERY教程
    
jAVAScript教程
  

点击查看效果

Das obige ist der detaillierte Inhalt vonjQuery: Anwendungsfall für den N-ten-Kind-Selektor. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!