Question

编辑：我终于找到了解决问题的方法 - 我正在使用错误的代码来实现我想要实现的目标。而不是'：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>

Answer 1

如果没有看到您的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有一个很好的小脚本来说明差异。

Answer 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的索引意味着，反直觉地：甚至选择第一个元素，第三个元素，在匹配的集合中等等。

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

Answer 3

我终于解决了我的问题 - 我使用了错误的代码来实现我想要实现的目标。而不是'：nth-child'我应该使用'过滤器'。

这是我应该使用的代码：

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

过滤器：甚至可以工作......但是：nth-child（2）没有

3 个答案:

过滤器：甚至可以工作......但是：nth-​​child（2）没有

3 个答案:

过滤器：甚至可以工作......但是：nth-child（2）没有