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

      }
    })