Applying a jQuery event to multiple classes on a page

Question

I have a page with a few divs for which I wrote a script to adjust the height of it appropriately. Each div contains 2 divs in it and a small script is written to calculate the highest of these divs and lines them up correctly. The problem is that all the divs on the page are now assigned the same height. I would like it to calculate separately for each div.

HTML

  <article>
   <div class="inner-content-container equalHeight">
      some text....
   </div>
   <div class="entry-sidebar equalHeight"> some text...</div>
  </article>
  <article>
   <div class="inner-content-container equalHeight">
      some text....
   </div>
   <div class="entry-sidebar equalHeight"> some text...</div>
  </article>
  <article>
   <div class="inner-content-container equalHeight">
      some text....
   </div>
   <div class="entry-sidebar equalHeight"> some text...</div>
  </article>

jQuery

   var highestCol2 = Math.max(jQuery('.entry-sidebar').height(),jQuery('.inner-content-container').height());
   jQuery('.equalHeight', this).height(highestCol2);

You can use a callback function where you've got this in your jQuery call to specify a function that will affect each selected element individually. How you calculate the height individually is up to you. Please provide a fiddle if you want any further help. — scrowler
– scrowler, Commented Jul 2, 2014 at 2:29
Sorry for not being clear. I have multiple article divs who's height needs to be adjusted depending on the content inside it. At the moment the script is making all the article divs on the page the same height instead of calculating each one individually. — MG1
– MG1, Commented Jul 2, 2014 at 2:42
did you do the script on load or it's being called from somewhere? — Kyojimaru
– Kyojimaru, Commented Jul 2, 2014 at 2:54
I'm confused here. Why not move the height: CSS restriction and instead use something like min-height:, then the div will grow naturally to the content within it, width restrictions given of course. — Ohgodwhy
– Ohgodwhy, Commented Jul 2, 2014 at 2:59

Kyojimaru · Accepted Answer · 2014-07-02 03:12:47Z

1

you can use .each() function to get a callback for each article and use .children() to find only the element inside the current article and use it like this

$('article').each(function() {
    var $article = $(this);
    var highestCol = Math.max($article.children('.entry-sidebar').height(),$article.children('.inner-content-container').height());
    $article.children('.equalHeight').height(highestCol);
});

here's the working example in FIDDLE

answered Jul 2, 2014 at 3:12

Kyojimaru

2,7242 gold badges16 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Arun P Johny · Accepted Answer · 2014-07-02 03:07:41Z

1

It is because using height() as a getter method on a set of elements will return the height of the first element in the list.

So try

jQuery('article').height(function (i, height) {
    return Math.max(jQuery(this).find('.entry-sidebar').height(), jQuery(this).find('.inner-content-container').height());
})

answered Jul 2, 2014 at 3:07

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Collectives™ on Stack Overflow

Applying a jQuery event to multiple classes on a page

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related