将类添加到备用项并为每个容器重新启动

Question

我有一系列带有课程＆＃39; .collection-list＆＃39;的div。在每一个中，我需要为每个其他子div添加一个类.streamItem＆＃39;。这些是通过单击事件上的ajax调用加载的。

我遇到的问题是，该课程正被添加到其他所有的课程中。“。streamItem＆＃39;从页面顶部开始。我想要的是在每个父母的收集列表中开始和结束交替。没有影响其他人。

目标是两列布局，我需要为右栏中的项目添加不同的类，但第一项应该永远不会有该类。

到目前为止，这是我未能做到的事情：

$(document).ajaxComplete(function () {
    $('.collection-list').each(function(index) {
        $('.streamItem:even').addClass('right');
    })
});

Answer 1

不需要每个循环：

$('.collection-list').find('.streamItem:even').addClass('right');

JSFiddle：http://jsfiddle.net/TrueBlueAussie/vZdLc/

基本上find适用于每个collection-list，但只匹配每个streamItem内的偶数{{1}}。

Answer 2

您应该修改选择器，使其仅定位.each()循环中当前div的子元素：

$('.collection-list').each(function(index) {
    $(this).find('.streamItem:even').addClass('right');
});

或

$('.collection-list').each(function(index) {
    $('.streamItem:even',this).addClass('right');
})

Answer 3

如果您想使用.each()添加类，请查看我的回答，$(this)就是您在代码中遗漏的内容

Jquery的

     $('.streamItem:even').each(function() {
              $(this).addClass('right');
         });

CSS

.right{
    color: green;
}

HTML

<div class="collection-list">
    <div class="streamItem">item 1</div>
    <div class="streamItem">item 2</div>
    <div class="streamItem">item 3</div>
</div>

<div class="collection-list">
    <div class="streamItem">item 1</div>
    <div class="streamItem">item 2</div>
    <div class="streamItem">item 3</div>
    <div class="streamItem">item 4</div>
</div>

DEMO

对于此输出

---

使用此代码

         $( "div.streamItem:nth-child(odd)" ).addClass('right');

Demo

对于此输出

---

使用此代码

         $( "div.streamItem:nth-child(even)" ).addClass('right');

Demo

此输出是您获得并希望更改为上述两个

中的一个

---

$('div.streamItem:even').each(function() {
                $(this).addClass('right');

          });

Demo