CODEWITHSUNDEEP
jquery
Dejan.S
Dejan.S

Reputation: 19158

.each() in a div element, find a child element, set height based on its content (advanced?)

I need to find each row of divs, and base the height of the h2s in that row based on the h2 that got the most content.

I'm trying to loop through a div(main) that cointain divs(child), in that div i got sections(children) and in that section i got a h2.

Now based on the content in the h2 that got the most content in it, I set the height of the other h2s with the jQuery library: http://www.tomdeater.com/jquery/equalize_columns/

I know some jQuery, but not that much that I can figure this out how to do this.

Best is to check jsfiddle link http://jsfiddle.net/CbNRH/13/. I'm not finished with the script. First I'm trying to find the h2 element and write out its value. Then I thought I would move on, but this is more complex than my knowledge of jQuery. Any help is appreciated.

<div id="col-main">
    <div class="contain">
        <section><div><h2>depending on my content i use .equalizeCols()</h2></div></section>
        <section><div><h2>2</h2></div></section>
    </div>
    <div class="contain">
        <section><div><h2>depending on my content i use .equalizeCols()</h2></div></section>
        <section><div><h2>3</h2></div></section>
    </div>
    <div class="contain">
        <section><div><h2>depending on my content i use .equalizeCols()</h2></div></section>
        <section><div><h2>6</h2></div></section>
    </div>
</div>
<div id="write-out"></div>

$('#col-main > div').each(function () {
      var $this = $(this);
      $('#write-out').text($this.child('section').find('h2').val());
});

div.contain { margin-bottom: 10px; background-color: #dddddd; }
div.contain section { padding: 10px; }
div.contain section div h2 { font-size: 12px; width: 80px; background-color: red; }

div#write-out { font-size: 16px; padding: 10px; background-color: #ffcc00; }

Upvotes: 2

Views: 31079

Answers (3)

noob
noob

Reputation: 9212

Look at http://jsfiddle.net/CbNRH/39/, I think it is the best way to handle this without .equalizeCols()

Look at http://jsfiddle.net/CbNRH/38/, I think it is the best way to handle this with .equalizeCols()

Upvotes: 1

Jo&#227;o Louros
Jo&#227;o Louros

Reputation: 2760

I took k.honsali code and simplified a bit, so my suggestion is the following:

$('#col-main > div').each(function () {
    var tmpHeight = 0;
    $(this).find("h2").each(function() {
        tmpHeight = $(this).height() > tmpHeight ? $(this).height() : tmpHeight;
    });
    $(this).find("h2").height(tmpHeight);
});

Upvotes: 11

k.honsali
k.honsali

Reputation: 726

Salaam,

You have to loop two times: 1st time to find the highest number H2 and second time to adjust the height of the other H2s. let's do it:

var maxval = 0;
var maxheight = 0;
$('#col-main > div').each(function () {
      tmp = $(this).children().find('h2').val();
      if(tmp > maxval ) {
        maxval = tmp;
        maxheight = $(this).children().find('h2').css('height');
      }
});

$('#col-main > div').each(function () {
      $(this).children().find('h2').css('height', maxheight);
});

Still, I wonder if the above could be optimized.

Upvotes: 4

Related Questions