加载中...

:nth-child

概述    nth-child selector

返回值：Array<Element(s)>

描述：选择的他们所有父元素的第n个子元素。

  • V : 1.1.4jQuery( ":nth-child(index/even/odd/equation)" )

    index: 每个相匹配子元素的索引值，从1开始，也可以是字符串 even 或 odd，或一个方程式( 例如 :nth-child(even), :nth-child(4n) )。

因为jQuery的实现:nth-child(n)是严格来自CSS规范，所以n值是“1索引”，也就是说，从1开始计数。对于所有其他选择器表达式，jQuery遵循JavaScript的“0索引”的计数。因此，给定一个单一<ul>包含两个<li>， $('li:nth-child(1)')选择第一个<li>，而$('li:eq(1)')选择第二个。

:nth-child(n)伪类很容易混淆:eq(n)，即使两个可能导致完全不同的匹配的元素。用:nth-child(n)时 ，所有子元素都计算在内，不管它们是什么，并且指定的元素被选中仅匹配连接到伪类选择器。而用:eq(n)时，只有与这个伪类前面的选择相匹配的元素才会被计数（即，成为候选元素），不限于任何其他元素的孩子，而且第（n +1）个一（n是基于0）被选中。

这个不寻常的用法，可进一步讨论中找到 W3C CSS specification.

看下面一个示例： 
<div class="test">

<p>A元素</p>

<p>B元素</p>

<div>C元素</div>

<p>D元素</p>

</div>

看下面的代码 

$("p:nth-child(2)")//B元素被选中
p:nth-child(2)选择器选择B元素，p:nth-child(2)选择器要满足的条件是：
  • 1、是一个段落p元素；
  • 2.是父元素的第二个子元素
上述的HTML结构中，<div class="test">的第二个子元素是p元素，所以满足条件，B元素就被中了。

jQuery 1.9新增了:nth-of-type()选择器，和这个:nth-child()比较容易混淆，具体查看:nth-of-type()中的比较说明。

示例

实例

在每个 ul 查找第 2 个li

HTML 代码: 
<ul>
  <li>John</li>
  <li>Karl</li>
  <li>Brandon</li>
</ul>
<ul>
  <li>Glen</li>
  <li>Tane</li>
  <li>Ralph</li>
</ul>
jQuery 代码: 
$("ul li:nth-child(2)")
结果: 
[ <li>Karl</li>,   <li>Tane</li> ]

实例

查找每个匹配的 ul 中的第二个 li，并将它标记出来。 

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>nth-child demo</title>
  <style>
  div {
    float: left;
  }
  span {
    color: blue;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<div>
  <ul>
    <li>John</li>
    <li>Karl</li>
    <li>Brandon</li>
  </ul>
</div>
<div>
  <ul>
    <li>Sam</li>
  </ul>
</div>
<div>
  <ul>
    <li>Glen</li>
    <li>Tane</li>
    <li>Ralph</li>
    <li>David</li>
  </ul>
</div>
 
<script>
$( "ul li:nth-child(2)" ).append( "<span> - 2nd!</span>" );
</script>
 
</body>
</html>

运行一下

实例

这个示例展示了刚才提到的两个容易混淆的选择器是如何工作的。注意这里的 :even 和 :odd 会无视它们的父元素，而仅仅把元素列表中的元素每隔一个过滤出来。而 :nth-child 则会计算子元素在各自父元素中的索引值。 

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>nth-child demo</title>
  <style>
  button {
    display: block;
    font-size: 12px;
    width: 100px;
  }
  div {
    float: left;
    margin: 10px;
    font-size: 10px;
    border: 1px solid black;
  }
  span {
    color: blue;
    font-size: 18px;
  }
  #inner {
    color: red;
  }
  td {
    width: 50px;
    text-align: center;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<div>
  <button>:nth-child(even)</button>
  <button>:nth-child(odd)</button>
  <button>:nth-child(3n)</button>
  <button>:nth-child(2)</button>
</div>
<div>
  <button>:nth-child(3n+1)</button>
  <button>:nth-child(3n+2)</button>
  <button>:even</button>
  <button>:odd</button>
</div>
 
<div>
  <table>
    <tr><td>John</td></tr>
    <tr><td>Karl</td></tr>
    <tr><td>Brandon</td></tr>
    <tr><td>Benjamin</td></tr>
  </table>
</div>
<div>
  <table>
    <tr><td>Sam</td></tr>
  </table>
</div>
<div>
  <table>
    <tr><td>Glen</td></tr>
    <tr><td>Tane</td></tr>
    <tr><td>Ralph</td></tr>
    <tr><td>David</td></tr>
    <tr><td>Mike</td></tr>
    <tr><td>Dan</td></tr>
  </table>
</div>
 
<span>tr<span id="inner"></span></span>
 
<script>
$( "button" ).click(function() {
  var str = $( this ).text();
  $( "tr" ).css( "background", "white" );
  $( "tr" + str ).css( "background", "#ff0000" );
  $( "#inner" ).text( str );
});
</script>
 
</body>
</html>
运行一下

还没有评论.