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 中有蓝色文本，而不是在所有 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>