jQuery回调函数，可在单击元素时检查子元素的数量

Question

我有一组“ div”，其子计数要在该div块下的用户淡出图像时检查，如果所有子级都已关闭，我想调用该函数：

编辑：当前的代码总是在div褪色时发出YES，我如何在不使用：visible过滤器的情况下完全销毁DOM。 在考虑HTML渐隐之后摆脱整个卡片类别：

<div class='scrolling-wrapper'>
  <div class='card'>
    <div class='panel panel-primary'>
      <div class='panel-body'>
        <div class='img-wrap'>
          <span class='close-x'> &times; </span>
          <img width='100%' id='3' class='' src='resizer/resizer.php?file=profiles/images/default_cover.jpg&width=700&height=400&action=resize&watermark=bridgoo&watermark_pos=tl&color=255,255,255&quality=100' />
        </div>
        <div class='title h5'>
          <span class='user-popover'>
                        <a href='/groupstomason/'><b>tomason</b></a>
                        </span>
          <br/>
          <small class='small-text'>for max tomason
                        </small>
        </div>
      </div>
      <div class='panel-heading'>
        <button class='btn btn-primary'> <span class='fa fa-plus-circle fa-fw'> </span>Join </button>    
      </div>
    </div>
    <div class='card-group-holder' style='width:250px; background-color:inherit;'>    
    </div>
   <div class="card"> another card</div>
    <div class="card"> another card</div>
   <div class="card"> another card</div>
  </div>

和下面的jQuery：

$('.img-wrap .close-x').on('click', function() {
  var card = $(this).closest('.card');
  card.fadeOut('slow', function() {
    var cardWrapper = $(this).closest('.card').closest('scrolling-wrapper');
    var cardcount = cardWrapper.children('.card');
    if (cardcount.length < 1) alert('yes');
  });
});

当<span class = 'close-x'> &times; </span> <span class = 'close-x'> &times; </span>被单击，整个<div class='card'>被淡出，然后在淡出时，如果不存在更多的牌或最后一张牌已被淡出，则发出alert('yes');

Answer 1

假设多个.card元素嵌套在同一父对象中，则可以检查所有同级对象是否已淡出。

在您的原始标记中，您有一个未封闭的</div> ，这会导致.card元素彼此之间不是兄弟姐妹，我相信这是您的错字，因为这是最简化的解释。

由于.fadeOut()隐藏了元素，因此您只需检查过滤后的:visible集是否返回1或更大的长度即可：

$('.img-wrap .close-x').on('click', function() {
  var card = $(this).closest('.card');
  card.fadeOut('slow', function() {
    var cardWrapper = $(this).closest('.scrolling-wrapper');
    var cardcount = cardWrapper.children('.card');
    if (cardcount.filter(':visible').length < 1) {
        console.log('All cards have faded out');
    }
  });
});

这是一个概念验证示例：

 $(function() { $('.close').on('click', function() { var card = $(this).closest('.card'); card.fadeOut('slow', function() { // Get wrapping ancestor var cardWrapper = $(this).closest('.scrolling-wrapper'); var cardcount = cardWrapper.children('.card'); // Filter out those that are not visible, and check for remaining visible cards if (cardcount.filter(':visible').length < 1) { console.log('All cards have faded out'); } }); }); }); 

 /* Just styles for a dummy call-to-action element in .card */ span.close { cursor: pointer; color: steelblue; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="scrolling-wrapper"> <div class="card">Card 1. <span class="close">Click to hide me.</span></div> <div class="card">Card 2. <span class="close">Click to hide me.</span></div> <div class="card">Card 3. <span class="close">Click to hide me.</span></div> <div class="card">Card 4. <span class="close">Click to hide me.</span></div> <div class="card">Card 5. <span class="close">Click to hide me.</span></div> </div> 

Answer 2

在您的回调中，您可以简单地测试至少有一张卡片是可见的：

if ($(this).closest('.card').siblings('.card:visible').length < 1) alert('yes');

 $('.img-wrap .close-x').on('click', function () { var card = $(this).closest('.card'); card.fadeOut('slow', function () { if ($(this).closest('.card').siblings('.card:visible').length < 1) console.log('yes'); }); }); 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div class='scrolling-wrapper'> <div class='card'> <div class='panel panel-primary'> <div class='panel-body'> <div class='img-wrap'> <span class='close-x'> &times; </span> <img width='100%' id='3' class='' src='resizer/resizer.php?file=profiles/images/default_cover.jpg&width=700&height=400&action=resize&watermark=bridgoo&watermark_pos=tl&color=255,255,255&quality=100'/> </div> <div class='title h5'> <span class='user-popover'> <a href='/groupstomason/'><b>tomason</b></a> </span> <br/> <small class='small-text'>for max tomason </small> </div> </div> <div class='panel-heading'> <button class='btn btn-primary'><span class='fa fa-plus-circle fa-fw'> </span>Join</button> </div> </div> <div class='card-group-holder' style='width:250px; background-color:inherit;'> </div> </div> <div class='card'> <div class='panel panel-primary'> <div class='panel-body'> <div class='img-wrap'> <span class='close-x'> &times; </span> <img width='100%' id='3' class='' src='resizer/resizer.php?file=profiles/images/default_cover.jpg&width=700&height=400&action=resize&watermark=bridgoo&watermark_pos=tl&color=255,255,255&quality=100'/> </div> <div class='title h5'> <span class='user-popover'> <a href='/groupstomason/'><b>tomason</b></a> </span> <br/> <small class='small-text'>for max tomason </small> </div> </div> <div class='panel-heading'> <button class='btn btn-primary'><span class='fa fa-plus-circle fa-fw'> </span>Join</button> </div> </div> <div class='card-group-holder' style='width:250px; background-color:inherit;'> </div> </div> </div>