What does nth-child(3n) mean in jquery?-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

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

黄舟

Jun 23, 2017 pm 02:19 PM

jquerynth-childmeanwhat is

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

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>

Code:

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

Result:

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

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>

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

Statement

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