javascript - jquery find 没有选择所需的 div

Question

我不明白为什么这不起作用:

$('article').addClass('new-article');
$($('.new-article').find('div')[1]).addClass('new-row');

.row {
  color: red;
}
.new-row {
  color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<article>

  <div class="row">text text 1</div>
  <div class="row">text text 2</div>
  <div class="row">text text 3</div>
  <div class="row">text text 4</div>
  <div class="row">text text 5</div>
  <div class="row">text text 6</div>
  <div class="row">text text 7</div>
  <div class="row">text text 8</div>

</article>

我想要实现的是在第二个 div 上添加自定义类并应用自定义 css，并且也在第四个 div 上添加它。 我只需要在第二个和第四个分区上使用它。

我知道我没有添加第四个 div 的 jsfiddle 部分代码，但逻辑应该是相同的......

有什么想法吗？

编辑: 我将该自定义更改为新的和更新的链接，对此感到抱歉。

问题是我只想在第二个 div 和第四个 div 中使用蓝色文本，而不是在所有 div 中使用蓝色文本。

Answer 1

使用jquery函数filter来定位第二个和第四个div:

$('article').addClass('new-article');

$('.new-article div').filter(function( index ){
     return index == 1 || index == 3;
}).addClass('new-row');

希望这有帮助。

---

$('article').addClass('new-article');

$('.new-article div').filter(function( index ){
     return index == 1 || index == 3;
}).addClass('new-row');

.row{
    color:red;  
}

.new-row{
    color:blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<article>

        <div class="row">text text 1</div>
        <div class="row">text text 2</div>
        <div class="row">text text 3</div>
        <div class="row">text text 4</div>
        <div class="row">text text 5</div>
        <div class="row">text text 6</div>
        <div class="row">text text 7</div>
        <div class="row">text text 8</div>

</article>