CODEWITHSUNDEEP
javascriptjqueryshow-hideelement
Fab
Fab

Reputation: 101

Javascript hide show a div if parent div has more than 4 anchor elements

The problem I have is that I want to detect if there are more than 4 anchor elements in a div ('.tile__list' in the example). If yes then I want to display another div (saying "MORE"), if the div contains less than 5 anchor elements then the "MORE"-div should be hidden.

I got it to work already with an easy example, but since I implemented drag and drop now, it needs to check the length after dropping an element, too :-/

Here my code example:

       <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 -->

and my JS (did the job before :-/):

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

      });

I set up a Fiddle...easier to see there -> http://jsfiddle.net/Bws3t/3/

I'd really be happy if someone could help me out...been searching for a solution for hrs! thx

Upvotes: 0

Views: 1088

Answers (2)

orolo
orolo

Reputation: 3951

I believe you had everything correct except the .tile__more selectors. By using jQuery 'context' selectors; you can isolate which div you are currently 'in' and select the correct icon.

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

Drap and drop: you'll need to call this code again when the drag and drop has ended similar to this:

$( "#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

  }

});

Upvotes: 1

lolo
lolo

Reputation: 237

You didn't properly select the .tile__more class. You need to start from the parent of .tile__more div then you will easily find it after:

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

Call this function eveytime you need to update your button after dom changed. So after dropping you should call this function:

update_more();

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

Upvotes: 2

Related Questions