Question

我有一些像这样的HTML标记：

<div class="item first">First Item</div>
<div class="item second">Second Item</div>
<div class="item third">Third Item</div>
<div class="item fourth">Fourth Item</div>      
<div class="item fifth">Fifth Item</div>
<div class="item sixth">Sixth Item</div>
<div class="item seventh" style="display: none;">Seventh Item</div>
<div class="item eighth" style="display: none;">Eighth Item</div></div>

<div class="button"></div>

您会注意到前6个类是可见的，但最后2个类的display：none style。

那是因为我让用户为两个其他项目交换两个项目，如果他们选择这样做的话。下面是非常简化的伪代码，但我并不担心，因为它有效 - 我只是想让你知道发生了什么：

$('.item').click(function(){  
    var thisClass = $(this).attr('class');
    $('.' + thisClass).fadeOut();
    $('.seventh').fadeIn();
});

现在我们遇到了真正的问题：

我总是在页面上有六个可见的项目（一些开始隐藏，一些开始可见）。我一直在做这样的事情：

$('.button').click(function(){
    $('#id').find('.class:visible').each(function() {
        //do something
    })
});

然而，'each'永远不会找到隐藏在pageload上的div，即使它们在按钮点击事件发生时可能是可见的。

我可以用计数器验证这一点。假设我解除了两个div并隐藏了两个div。我总共有六个可见的div，所以我希望得到六个结果 - 但在特定情况下，计数器永远不会高于四，并且它永远不会返回给我最初隐藏的div的类。

关于我能做些什么不同的任何想法？

tldr; $('#id').find('.class:visible')只查找在pageload上可见的div，并忽略曾经隐藏但现在可见的div。

Answer 1

我认为你要找的是一直显示6个项目，但也允许用户删除2个隐藏项目的2个现有项目

＆＃13;

var counter = 0;
$('.item').one('click.limit', function() {
  $(this).fadeOut();
  $('.item:hidden:first').fadeIn();
  if (++counter == 2) {
    $('.item').off('click.limit')
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <div class="item first">First Item</div>
  <div class="item second">Second Item</div>
  <div class="item third">Third Item</div>
  <div class="item fourth">Fourth Item</div>
  <div class="item fifth">Fifth Item</div>
  <div class="item sixth">Sixth Item</div>
  <div class="item seventh" style="display: none;">Seventh Item</div>
  <div class="item eighth" style="display: none;">Eighth Item</div>
</div>
<div class="button"></div>

＆＃13;

Answer 2

答案是......

我是个白痴。在最初隐藏的div上，类名中有一个我没注意到的空间。

叹息

感谢大家的帮助。

jQuery：“可见”检测最初隐藏的元素吗？

2 个答案: