• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • :nth-child(index/even/odd/equation)

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

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

    index:每个相匹配子元素的索引值,从1开始,也可以是字符串evenodd,或一个方程式(例如: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)选择器要满足的条件是:

    • 是一个段落p元素;
    • 是父元素的第二个子元素
    上述的HTML结构中,<div class="test">的第二个子元素是p元素,所以满足条件,B元素就被中了。

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

    例子

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

    <!DOCTYPE html>
    <html>
    <head>
      <style>
      div { float:left; }
      span { color:blue; }
      </style>
      <script src="https://www.lanmper.cn/static/js/jquery-3.5.0.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>
    <head>
      <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://www.lanmper.cn/static/js/jquery-3.5.0.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>