javascript - それぞれで可視要素のみを表示

Question

<div class="save" id="1">1</div>
<div class="save" id="2" style="display:none">2</div>
<div class="save" id="3">3</div>
<div class="save hide" id="4">4</div>
<div class="save" id="5">5</div>

.hide {
 display: none;
}

$('.save').each(function(){
   console.log($(this).attr('id'));
})

これは私に示します：

1
2
3
4
5

ただし、次のようにする必要があります。

1
3
5

各可視要素をループするには何を使用する必要がありますか?

Answer 1

:visibleセレクターを使用します。

$('.save:visible').each(function(){
    console.log(this.id);
})

.save要素が既にある場合は、次のことができfilterます。

var $saves = $(".save");
$saves.filter(':visible').each(function(){
    console.log(this.id);
})

Answer 2

$('.save:visible').each(function(){
       console.log($(this).attr('id'));
    })

または

$('.save').each(function(){
      if( $(this).is(':visible') ) { //only if visible
           console.log($(this).attr('id'));
      }
      else { //only if hidden

      }
    })