过滤器 :even 有效...但 :nth-child(2) 无效答案

【问题标题】：The filter :even works... but :nth-child(2) doesn't过滤器 :even 有效...但 :nth-child(2) 无效
【发布时间】：2013-04-25 17:32:47
【问题描述】：

编辑：我终于找到了解决问题的方法——我使用了错误的代码来实现我想要实现的目标。我应该使用 'filter' 而不是 ':nth-child'。

这是我应该使用的代码：

$('div [class^="thirdCredits"]').filter(function(index) {
return (index % 2 == 1);
}).css("border" , "1px red solid");

…… http://jsfiddle.net/focusonfiddle/YVw6F/2/ 你好，自从我上面的最后一条消息以来，我现在提供了更多代码。下面的代码有效，但如果你引入包含 :nth-child(2n) 的注释掉的代码，它就不会 - 发生了什么？谢谢。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>untitled</title>

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">

$("document").ready(function() {
//$.each($('[class^="thirdCredits"]:nth-child(2n)') ,function()     
$.each($('[class^="thirdCredits"]:even') ,function() 
{
    $(this).css("border" , "1px red solid");

    });
});
</script>

</head>
<body>
<div id="tableMarkup">
  <div id="myTable"></div>
  <div id="template">
    <ul style="width:65%; background-color:#67c1fd">
      <li>This is a line of text</li>
    </ul>
    <ul style="width:9%;">
      <li>
        <div class="styled-select">
          <select class="thirdCredits0">
            <option value="10">10</option>
            <option value="20">20</option>
            <option value="30">30</option>
          </select>
        </div>
      </li>
    </ul>
    <ul style="width:9%;">
      <li>
        <div class="styled-select">
          <select class="thirdCredits1">
            <option value="10">10</option>
            <option value="20">20</option>
            <option value="30">30</option>
          </select>
        </div>
      </li>
    </ul>
    <ul style="width:9%;">
      <li>
        <div class="styled-select">
          <select class="thirdCredits2">
            <option value="10">10</option>
            <option value="20">20</option>
            <option value="30">30</option>
          </select>
        </div>
      </li>
    </ul>
    <ul style="width:9%;">
      <li>
        <div class="styled-select">
          <select class="thirdCredits3">
            <option value="10">10</option>
            <option value="20">20</option>
            <option value="30">30</option>
          </select>
        </div>
      </li>
    </ul>
  </div>
</div>
</body>
</html>

【问题讨论】：

nth-child(2) 只抓取第二个孩子
你能发布你的 HTML 吗？
您忘记解释“不起作用”是什么意思。你也忘了阅读the documentation。为什么？

标签： javascript jquery css-selectors

【解决方案1】：

我终于找到了解决问题的方法——我使用了错误的代码来实现我想要实现的目标。我应该使用 'filter' 而不是 ':nth-child'。

这是我应该使用的代码：

$('div [class^="thirdCredits"]').filter(function(index) {
return (index % 2 == 1);
}).css("border" , "1px red solid");

【讨论】：

【解决方案2】：

http://jsbin.com/oriwuc/2/edit

HTML：

<div class="thirdCredits">1</div>
<div class="thirdCredits">2</div>
<div class="thirdCredits">3</div>
<div class="thirdCredits">4</div>

Javascript：

console.log("This will output even ones with index of 0, 2, 4");

$.each($('[class^=thirdCredits]:even') ,function() { 
       console.log($(this).text());
});

console.log("This will output the second child only");

$.each($('[class^=thirdCredits]:nth-child(2)') ,function() { 
       console.log($(this).text());
});

console.log("This will output every 2nd child 2, 4, 6 etc.");

$.each($('[class^=thirdCredits]:nth-child(2n)') ,function() { 
       console.log($(this).text());
});

jQuery(":even")

请特别注意，从 0 开始的索引意味着，与直觉相反， :even 选择第一个元素，第三个元素，以此类推。

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

index: The index of each child to match, starting with 1, the string even or odd, or an equation ( eg. :nth-child(even), :nth-child(4n) )

【讨论】：

嗨 KingKongFrog 感谢您的回答 - 我提供了更多代码，因为我还没有工作 - 我对 Jquery 还很陌生，谢谢。

【解决方案3】：

如果没有看到您的 HTML，我无法回答发生了什么不同，但 :even 与 nth-child(2) 不同 - 也许您想要 nth-child(2n)？

如果您的 HTML 如下所示：

<ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <li>d</li>
    <li>e</li>
</ul>

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

运行此代码：

$('li:even').each(function() { console.log($(this).text()); });

将记录“a”、“c”、“e”、“2”、“4” - 它只是获取所有匹配的元素并为您提供其他所有元素。

这段代码：

$('li:nth-child(2)').each(function() { console.log($(this).text()); });

将记录“b”、“2” - 仅记录每个父母的第二个孩子。

The jQuery documentation 有一个很好的小脚本来说明差异。

【讨论】：

嗨，Paolo Bergantino，感谢您的回答 - 我提供了更多代码，因为我还没有让事情正常工作。