如果父div有超过4个 anchor 元素，Javascript隐藏显示div

Question

我遇到的问题是我想检测 div 中是否有超过 4 个 anchor 元素(示例中为“.tile__list”)。如果是，那么我想显示另一个 div(即“MORE”)，如果该 div 包含少于 5 个 anchor 元素，则应隐藏“MORE”-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();
         }

      });

我设置了一个 fiddle ...更容易看到那里 -> http://jsfiddle.net/Bws3t/3/

如果有人能帮助我，我真的很高兴...我已经寻找解决方案几个小时了!谢谢

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();
    }
}

每当 dom 更改后需要更新按钮时，请调用此函数。所以在删除之后你应该调用这个函数:

update_more();

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