-3

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

3 回答 3

2

如果没有看到您的 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”——只有每个父母的第二个孩子。

jQuery 文档有一个很好的小脚本来说明这些差异。

于 2013-05-01T17:15:25.143 回答
0

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（“：偶数”）

特别要注意，基于 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) )
于 2013-05-01T17:19:45.677 回答
-1

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

这是我应该使用的代码：

$('div [class^="thirdCredits"]').filter(function(index) {
return (index % 2 == 1);
}).css("border" , "1px red solid");
于 2013-05-02T17:05:56.753 回答