javascript - 存储所有隐藏的元素以便稍后再次隐藏

Question

如何使用each函数找到另一个函数中的所有元素，记录每个元素的所有类名；

<div class="Actions">
    <div class="Trash"><i class="fa fa-trash-o" aria-hidden="true"></i></div>
    <div class="Mark-Read"><i class="fa fa-envelope-open-o" aria-hidden="true"></i></div>
    <div class="Flag"><i class="fa fa-flag" aria-hidden="true"></i></div>
    <div class="Pin"><i class="fa fa-thumb-tack" aria-hidden="true"></i></div>
</div>

// My progress...
$(this).find('.Actions').children().not(":visible").each(....);

然后稍后隐藏所有这些元素？

我只是在其他地方使用 $(this).find('.Actions').children().show(); 来显示所有元素，但是稍后在那些最初隐藏的元素上需要被重新设定。

Answer 1

我已经根据您的预期创建了一个工作片段。

基本上，属性已添加到元素中，以便在元素最初隐藏时提供引用。

然后使用相同的属性，单击“重置”按钮时将其设置为隐藏。

$('.Actions').children().not(':visible').each(function(){
  $(this).attr('data-display', 'none');
});

$('.Actions').children().show();

$('#reset').click(function(){
  $('.Actions').children('[data-display="none"]').hide();
});

.Flag
{
  display: none;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Actions">
    <div class="Trash"><i class="fa fa-trash-o" aria-hidden="true"></i></div>
    <div class="Mark-Read"><i class="fa fa-envelope-open-o" aria-hidden="true"></i></div>
    <div class="Flag"><i class="fa fa-flag" aria-hidden="true"></i></div>
    <div class="Pin"><i class="fa fa-thumb-tack" aria-hidden="true"></i></div>
</div>
<input id="reset" type="button" value="Reset">