cari

Rumah  >  Artikel  >  hujung hadapan web  >  jquery中nth-child(3n)的意思是什么？

jquery中nth-child(3n)的意思是什么？

黄舟
黄舟asal
2017-06-23 14:19:143080semak imbas

:nth-child表示匹配其下的子元素:nth-child(Xn+Y)表示从第Y个开始，递增X则可以有:nth-child(3n+10)表示从第10个开始，10，13，16，19……:nth-child(3n)则Y=0，可省略，表示从0开始，0，3，6，9……

希望对你有帮助：子元素

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

匹配其父元素下的第N个子或奇偶元素

区别：':eq(index)' 只匹配一个元素，而这个将为每一个父元素匹配子元素。:nth-child从1开始的，而:eq()是从0算起的！

可以使用::nth-child(even)，:nth-child(odd)，:nth-child(3n)，:nth-child(2)，:nth-child(3n+1)，:nth-child(3n+2)

index (Number) : 要匹配元素的序号，从1开始

示例　在每个ul查找第2个li

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

代码:

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


结果:

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


nth-child(3n+1)是什么意思？

<!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表示匹配其下的子元素:nth-child(Xn+Y)表示从第Y个开始，递增X则可以有:nth-child(3n+10)表示从第10个开始，10，13，16，19……:nth-child(3n)则Y=0，可省略，表示从0开始，0，3，6，9……”这位回答的有问题的吧，貌似nth-child的参数最小也是1，是从1开始的，而不是从0开始的啊。

Atas ialah kandungan terperinci jquery中nth-child(3n)的意思是什么？. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya： jquery中选择子元素的选择器即nth-child选择器Artikel seterusnya：Jquery :first-child选择器的深入理解

Artikel berkaitan

Lihat lagi