Question

我遇到的问题是我想检测div中是否有超过4个锚元素（＆＃39; .tile__list＆＃39;在示例中）。如果是，那么我想显示另一个div（说＆＃34; MORE＆＃34;），如果div包含少于5个锚元素，则应该隐藏＆＃34; MORE＆＃34; -div。

我已经通过一个简单的例子开始工作了，但是由于我现在实现拖放，它也需要在删除元素后检查长度： - /

这是我的代码示例：

       <div class="tile"> <!-- START 1st tile -->
       <div class="tile__name"></div>
       <button class="tile__more">more</button>
        <div class="tile_list_wrapper" data-force="70">
                <div class="tile__list">
      <a class="quickmark" href="https://google.com">
       <img src="http://upload.wikimedia.org/wikipedia/commons/b/b3/Wikipedia-logo-v2-en.svg"></img>
      </a>
     <a class="quickmark" href="https://google.com">
       <img src="http://upload.wikimedia.org/wikipedia/commons/b/b3/Wikipedia-logo-v2-en.svg"></img>
     </a>
     <a class="quickmark" href="https://google.com">
       <img src="http://upload.wikimedia.org/wikipedia/commons/b/b3/Wikipedia-logo-v2-en.svg"></img>
     </a>
     <a class="quickmark" href="https://google.com">
       <img src="http://upload.wikimedia.org/wikipedia/commons/b/b3/Wikipedia-logo-v2-en.svg"></img>
     </a>
            </div> <!-- tile list-->
           </div> <!-- tile_list_wrapper--> 
 </div> <!-- END 1st tile -->



 <div class="tile"> <!-- START 2nd tile -->
    <div class="tile__name"></div>
    <button class="tile__more">more</button>
    <div class="tile_list_wrapper" data-force="70">
        <div class="tile__list">
         <a class="quickmark" href="https://google.com">
      <img src="http://upload.wikimedia.org/wikipedia/commons/b/b3/Wikipedia-logo-v2-en.svg"></img>
         </a>
         <a class="quickmark" href="https://google.com">
      <img src="http://upload.wikimedia.org/wikipedia/commons/b/b3/Wikipedia-logo-v2-en.svg"></img>
         </a>
         <a class="quickmark" href="https://google.com">
      <img src="http://upload.wikimedia.org/wikipedia/commons/b/b3/Wikipedia-logo-v2-en.svg"></img>
         </a>
         <a class="quickmark" href="https://google.com">
      <img src="http://upload.wikimedia.org/wikipedia/commons/b/b3/Wikipedia-logo-v2-en.svg"></img>
         </a>
         <a class="quickmark" href="https://google.com">
      <img src="http://upload.wikimedia.org/wikipedia/commons/b/b3/Wikipedia-logo-v2-en.svg"></img>
         </a>
         <a class="quickmark" href="https://google.com">
      <img src="http://upload.wikimedia.org/wikipedia/commons/b/b3/Wikipedia-logo-v2-en.svg"></img>
         </a>
         <a class="quickmark" href="https://google.com">
      <img src="http://upload.wikimedia.org/wikipedia/commons/b/b3/Wikipedia-logo-v2-en.svg"></img>
         </a>
         <a class="quickmark" href="https://google.com">
      <img src="http://upload.wikimedia.org/wikipedia/commons/b/b3/Wikipedia-logo-v2-en.svg"></img>
         </a>
         <a class="quickmark" href="https://google.com">
      <img src="http://upload.wikimedia.org/wikipedia/commons/b/b3/Wikipedia-logo-v2-en.svg"></img>
         </a>
         <a class="quickmark" href="https://google.com">
      <img src="http://upload.wikimedia.org/wikipedia/commons/b/b3/Wikipedia-logo-v2-en.svg"></img>
         </a>
         <a class="quickmark" href="https://google.com">
      <img src="http://upload.wikimedia.org/wikipedia/commons/b/b3/Wikipedia-logo-v2-en.svg"></img>
        </a>
        <a class="quickmark" href="https://google.com">
      <img src="http://upload.wikimedia.org/wikipedia/commons/b/b3/Wikipedia-logo-v2-en.svg"></img>
        </a>
                </div> <!-- tile list-->
               </div> <!-- tile_list_wrapper--> 
    </div> <!-- tile -->

和我的JS（之前的工作： - /）：

  $('.tile__list').each(function() {
         var $this = $(this);
         if ($this.children('a').length > 4) { //length of item list

            $(this).next('.tile__more').show();
         }
         else if ($this.children('a').length < 5) { //length of item list

            $(this).next('.tile__more').hide();
         }

      });

我设置了一个小提琴...更容易看到 - ＆gt; http://jsfiddle.net/Bws3t/3/

如果有人可以帮助我，我真的很开心......一直在为小时寻找解决方案！ THX

Answer 1

您没有正确选择.tile__more课程。您需要从.tile__more div的父级开始，然后您将很快找到它：

function update_more() {
    $('.tile').each(function() {
        var $this = $(this);
        if ($this.find('.quickmark').length > 4) {
            $this.find('.tile__more').show();
        } else {
            $this.find('.tile__more').hide();
    }
}

调用此功能eveytime，您需要在更换dom后更新按钮。所以在放弃后你应该调用这个函数：

update_more();

http://jsfiddle.net/Bws3t/8/

Answer 2

我相信除了.tile__more选择器外，你的一切都是正确的。通过使用jQuery＆＃39; context＆＃39;选择;你可以找出你目前在哪个div＆＃39;并选择正确的图标。

$('.tile').each(function() {
    $this = $(this);
    if ($('.quickmark', $this).length > 4) {
      $('.tile__more', $this).show();
    } else {
      $('.tile__more', $this).hide();
    }
});

Drap and drop：当拖放结束时，您需要再次调用此代码：

$( "#draggable" ).draggable({

  stop: function() {

    $('.tile').each(function() {
      $this = $(this);
      if ($('.quickmark', $this).length > 4) {
        $('.tile__more', $this).show();
      } else {
        $('.tile__more', $this).hide();
      }
    });
    //this code looks familiar; maybe you want to put it in it's own function and call it from    here and when the dom loads

  }

});

如果父div有超过4个锚元素，则Javascript hide显示div

2 个答案: