Was bedeutet nth-child(3n) in jquery?-js-Tutorial-php.cn

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

黄舟

Freigeben： 2017-06-23 14:19:14

Original

3122 Leute haben es durchsucht

: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)

Nach dem Login kopieren

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
< in jeder ul 🎜>

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

Nach dem Login kopieren

Code:

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

Nach dem Login kopieren

Ergebnis:

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

Nach dem Login kopieren

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>

Nach dem Login kopieren

“: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!