Heim >Web-Frontend >js-Tutorial >Was bedeutet nth-child(3n) in jquery?

Was bedeutet nth-child(3n) in jquery?

黄舟Original: 2017-06-23 14:19:143128Durchsuche

:nth-child bedeutet, dass die untergeordneten Elemente darunter übereinstimmen: nth-child(Xn+Y) bedeutet, dass mit dem Y-ten begonnen wird. Zunehmendes X kann haben: nth-child(3n+10) bedeutet, mit dem 10. zu beginnen. , 10, 13, 16, 19...:nth-child(3n), dann Y=0, was weggelassen werden kann, was anzeigt, dass es bei 0, 0, 3, 6, 9... beginnt...

Ich hoffe, Sie sind hilfreich: Untergeordnetes Element

:nth-child(index/even/odd/equation)

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

Unterschied: ': eq(index)' stimmt nur mit einem Element überein, und dieses stimmt mit untergeordneten Elementen für jedes übergeordnete Element überein. :nth-child beginnt bei 1 und :eq() beginnt bei 0!

Sie können ::nth-child(even), :nth-child(odd), :nth-child(3n), :nth-child(2), :nth-child(3n+1 verwenden ) , :nth-child(3n+2)

index (Number): Die Seriennummer des abzugleichenden Elements, beginnend bei 1

Beispiel findet das 2. Li

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

Code:

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

Ergebnis:

<li>Karl</li>, <li>Tane</li>

nth-child(3n+1) Was bedeutet es?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=" http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="jquery-1.2.6.js" type="text/javascript" language="javascript"></script>
<style type="text/css">
<!--
-->
</style>
<script type="text/javascript" language="javascript" >
<!--
$(document).ready(function (){
$("#nav li:nth-child(3n+2) a").each(function(){
alert($(this).text());
});
});
-->
</script>
</head>
<body>
<ul id="nav">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">8</a></li>
<li><a href="#">9</a></li>
<li><a href="#">10</a></li>
</ul>
</body>
</html>

“:nth-child bedeutet, dass die untergeordneten Elemente darunter übereinstimmen: nth-child(Xn+Y) bedeutet, dass mit dem Y-ten begonnen wird, und das Erhöhen von X kann Folgendes haben:nth-child(3n+10 ) bedeutet ab dem 10., 10, 13, 16, 19 ...: n-tes Kind (3n), dann ist Y = 0, das weggelassen werden kann, was ab 0, 0, 3, 6, 9 ... bedeutet " Diese Person antwortete: Stimmt etwas nicht? Es scheint, dass der minimale Parameter von nth-child 1 ist und bei 1 und nicht bei 0 beginnt.

Das obige ist der detaillierte Inhalt vonWas bedeutet nth-child(3n) 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

Vorheriger Artikel：Der Selektor zum Auswählen untergeordneter Elemente in jquery ist der n-te untergeordnete SelektorNächster Artikel：Der Selektor zum Auswählen untergeordneter Elemente in jquery ist der n-te untergeordnete Selektor

In Verbindung stehende Artikel

Mehr sehen