jQuery - element is selected by attribute but the index returns value of the elements without attribute

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>

So here is my code. It is simply supposed to add left and right classes to the odd and even elements that have .item class and have display:block. However the index() acts as if I selected all the elements with class .item without the attribute selection. Can anybody explain me why and how to fix this?