javascript - jQuery - 元素由属性选择，但索引返回没有属性的元素的值

Question

function check(){
    $('.left').removeClass('left');
    $('.right').removeClass('right');

    $('.item[style*="display: block"]').each(function(index){
        console.log('checking...');
        console.log($(this));
        console.log($(this).index()%2);

        if ($(this).index()%2==0)
            $(this).addClass('left');
        else
            $(this).addClass('right');
    });
}

<div class="item" style="display:block"></div> 
<div class="item" style="display:block"></div> 
<div class="item" style="display:block"></div> 
<div class="item" style="display:none"></div> 
<div class="item" style="display:block"></div>

这是我的代码。只需将 left 和 right 类添加到具有 .item 类并具有 display:block 的奇数和偶数元素即可。然而，index() 的行为就好像我选择了类 .item 的所有元素，而没有选择属性。谁能解释一下为什么以及如何解决这个问题？

Answer 1

使用filter来过滤所需的元素。然后使用each迭代 jquery 对象以匹配奇数和偶数

function check() {

    $('.left').removeClass('left');
    $('.right').removeClass('right');
    $('.item').filter(function() {
        return $(this).css('display') == 'block';
    }).each(function(index) {
        console.log(index);
        if (index % 2 == 0)
            $(this).addClass('left');
        else
            $(this).addClass('right');
    });
}

check()

JSFIDDLE