Home > Web Front-end > JS Tutorial > body text

What does nth-child(3n) mean in jquery?

黄舟
Release: 2017-06-23 14:19:14
Original
3082 people have browsed it

:nth-child means matching the sub-elements below it: nth-child(Xn+Y) means starting from the Yth one. Increasing X can have: nth-child(3n+10) means starting from the 10th one. , 10, 13, 16, 19...:nth-child(3n), then Y=0, which can be omitted, indicating starting from 0, 0, 3, 6, 9...

I hope to You are helpful: Child element

:nth-child(index/even/odd/equation)
Copy after login

matches the Nth child or odd-even element under its parent element

Difference: ':eq(index)' only matches one element , and this one will match child elements for every parent element. :nth-child starts from 1, and :eq() starts from 0!

You can use ::nth-child(even), :nth-child(odd), :nth-child(3n), :nth-child(2), :nth-child(3n+1) , :nth-child(3n+2)

index (Number): The serial number of the element to be matched, starting from 1

Example finds the second li
# in each ul
##

<ul><li>John</li> <li>Karl</li> <li>Brandon</li></ul>
<ul><li>Glen</li> <li>Tane</li> <li>Ralph</li></ul>
Copy after login

Code:

$("ul li:nth-child(2)")
Copy after login

Result:

<li>Karl</li>, <li>Tane</li>
Copy after login

nth-child(3n+1) What does it mean?

<!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>
Copy after login
“:nth-child means matching the child elements below it: nth-child(Xn+Y) means starting from the Yth one, and increasing X can have:nth-child(3n+10) means Starting from the 10th one, 10, 13, 16, 19...:nth-child(3n) means Y=0, which can be omitted, meaning starting from 0, 0, 3, 6, 9..." This person answered The problem is, it seems that the minimum parameter of nth-child is also 1, and it starts from 1, not from 0.

The above is the detailed content of What does nth-child(3n) mean in jquery?. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template