CODEWITHSUNDEEP
jqueryclassdynamic
Jacco van der Post
Jacco van der Post

Reputation: 113

jquery for each class containing ... do

I have a unknown number of unique column divs :

 <div class="columns-1"><div class="left"></div><div class="right"></div></div>
 <div class="columns-2"><div class="left"></div><div class="right"></div></div>
 <div class="columns-3"><div class="left"></div><div class="right"></div></div>

I want to do for each columns- class something.

Application :

  function equalHeight(group) {
  tallest = 0;
  group.each(function() {
  thisHeight = $(this).height();
  if(thisHeight > tallest) {
     tallest = thisHeight;
  }
  });
  group.height(tallest);
  }

Which allows to give all columns of the left and right divs within the containing columns- div the same height.

  $(document).ready(function() {
  equalHeight($(".columns-X div"));
  });

So the latter part needs to be repeated for columns-1, columns-2 and columns-3

I found here some examples how to check on part of the classname but these examples would address all columns div classes at once, instead of each a time, resulting in equal heights for all left and right divs in the whole webpage. Find dynamic classname of element with jQuery

Upvotes: 1

Views: 4746

Answers (1)

Chandu
Chandu

Reputation: 82913

Try this:

$("div[class^=columns-]").each(
    function(){
        equalHeight($(this).find("div"));
    }
)

Upvotes: 2

Related Questions