CODEWITHSUNDEEP
jquery
AnApprentice
AnApprentice

Reputation: 111060

jquery How to loop through a series of items and take action?

Given HTML like:

<div class="itemList">
  <div class="streamBox version-2"> stuff </div>
  <div class="streamBox version-2"> stuff </div>
  <div class="streamBox version-3"> stuff </div>
  <div class="streamBox version-2"> stuff </div>
  <div class="streamBox version-3"> stuff </div>
  <div class="streamBox version-1"> stuff </div>
</div>

How can I get jquery to loop through all the '.streamBox' inside of the '.itemList' div?

When looping through, given a version #, like 2, how to get it to show() version-2 but hide all the others?

Thanks

Upvotes: 1

Views: 346

Answers (3)

Betamos
Betamos

Reputation: 28897

$('.itemList').children('.steamBox').each(function(index) {
    // Now you can use $(this) to manipulate a list item
    if (index != 2) // index starts at 0
        $(this).hide();
});

Upvotes: 2

Victor
Victor

Reputation: 4721

try something like:

function showVersion(ver) {
$('.streamBox').hide();
$('.version-' + ver).show();
}

Upvotes: 1

Šime Vidas
Šime Vidas

Reputation: 186043

$('.itemList').children().hide().filter('.version-2').show();

Also, use the UL element: 

<ul class="itemList">
  <li class="version-2"> stuff </li>
  <li class="version-2"> stuff </li>
  <li class="version-3"> stuff </li>
  <li class="version-2"> stuff </li>
  <li class="version-3"> stuff </li>
  <li class="version-1"> stuff </li>
</ul>

Upvotes: 4

Related Questions