CODEWITHSUNDEEP
jqueryloops
user381800
user381800

Reputation:

Best method to traverse into each element and perform action via jQuery

I am trying to figure out how to traverse into elements depending on a class name and perform some action if it has this class or do something else if it doesn't.

Please see my code so far:

<script type="text/javascript">
jQuery(document).ready(function($) {
     var container = $('.container');

     container.each(function() {
          // if all list item has class of hidden then hide parent container
          container.hide();

          // if not all list item has class of hidden then show parent container
          container.show();
     });
});
</script>

<div class="container container1">
     <ul>
          <li class="item">item 1</li>
          <li class="item hidden">item 2</li>
          <li class="item">item 3</li>
          <li class="item">item 4</li>
     </ul>
</div>

<div class="container container2">
     <ul>
          <li class="item hidden">item 1</li>
          <li class="item hidden">item 2</li>
          <li class="item hidden">item 3</li>
          <li class="item hidden">item 4</li>
     </ul>
</div>

From the code above the desired result is container2 should be completely hidden because all the list item within has a class of "hidden". While container1 shows because not all list items have the class "hidden".

As you can see, I got as far as using the "each" function to iterate through the containers but I am stuck on how to implement where it will check each list item for the specific class. My thought would be to perform another each function within it? But not sure...

Thanks for looking.

Upvotes: 0

Views: 102

Answers (5)

Olaf Dietsche
Olaf Dietsche

Reputation: 74088

You can further select with container as context and hide the container, when the number of hidden items is equal to all list items. Show otherwise.

$('.container').each(function() {
  var li1 = $('li', $(this)).length;
  var li2 = $('li.hidden', $(this)).length;
  if (li1 == li2)
    $(this).hide();
  else
    $(this).show();
});

See JSFiddle for testing.

Upvotes: 1

Joseph Silber
Joseph Silber

Reputation: 220106

container.each(function() {
    var $this = $(this);
    if ( $this.find('li:not(.hidden)').length ) {
        $this.show();
    } else {
        $this.hide();
    }
});

Here's the fiddle: http://jsfiddle.net/5AHQZ/

Upvotes: 1

Blazemonger
Blazemonger

Reputation: 92983

Playing code golf:

$('.container').each(function() {
    $(this).toggle(!!$('li:not(.hidden)',this).length);
});

http://jsfiddle.net/mblase75/Ajjkc/

Upvotes: 3

Dave Thieben
Dave Thieben

Reputation: 5437

$('.container').each(function() {
    if ($(this).find('.item.hidden').length == $(this).find('.item').length)
        $(this).hide();
    else
        $(this).show();        
});

Upvotes: 0

Hugo
Hugo

Reputation: 6464

What you are missing is something like this is you loop:

jQuery(document).ready(function($) {
     var container = $('.container > ul > li');

     container.each(function(index, element) {
          if($(element).hasClass('hidden')){
            $(element).css({display: 'none'});
          }
     });
});

I modified the selector too.

Regards,

Upvotes: 0

Related Questions