jquery. how to get each siblings height?

Question

I think this is very easy question for someone who is more experienced in Jquery.

for example we have simple html page with a few divs, and 3 of them have the same css class 'sidebar'

Each of this 'sidebar' divs have different content and different height.

I need to compare this divs height and find the longest one.

I know how to realize comparing, but I do not know how in Jquery I can take each of this divs

to store their value in vairable or array.

Are you specifying height of the div in sidebar class or is it explicitly given? — JPReddy, Jul 16 '10 at 04:05

score 13 · Answer 1 · answered Jul 16 '10 at 04:09

13

I'm not sure why the two answers posted so far are using jQuery.each() rather than just calling each() directly, so here's what I would recommend:

$('#elementID').siblings().each(function ()
{
    var height = $(this).height();
});

To put each height into an array:

var heights = [];
$('#elementID').siblings().each(function ()
{
   heights.push($(this).height());
});

Or, just use map():

var heights = $('#elementID').siblings().map(function ()
{
   return $(this).height();
}).get();

answered Jul 16 '10 at 04:09

Matt Ball

354,903
100
647
710

1

I was trying `$(this).siblings.each(function()...` and nothing was happening. Duhhh... now that I saw your code I realized I was missing the parenthesis! siblings() This is obvious since it's a function. Lost 15 minutes debugging this. :) – Leniel Maccaferri Jul 18 '12 at 20:04

score 5 · Accepted Answer · answered Jul 16 '10 at 04:05

5

$.each($('.sidebar'), function() {
    var height = $(this).height();
});

answered Jul 16 '10 at 04:05

Calvin

8,697
7
43
51

thank you! learning jquery, but sometimes it is difficult to do simple things, because I do not know all events and operators. – Akhmed Jul 16 '10 at 04:16
You're welcome. When in doubt, use the jQuery documentation: http://api.jquery.com/ – Calvin Jul 16 '10 at 04:21
What's with using `jQuery.each` over plain old `.each()`? See my answer for links to the two. – Matt Ball Jul 16 '10 at 04:28

score 0 · Answer 3 · answered Jul 16 '10 at 04:02

When I had to do the same thing, this is the code I used:

    var tabPanels = $("...");
    var maxHeight = 0;

    $.each(tabPanels, function() {
        var height = $(this).height();
        maxHeight = (height > maxHeight) ? height: maxHeight;
    });

    $.each(tabPanels, function() {
        $(this).css("height", maxHeight + "px");
    });

jquery. how to get each siblings height?

3 Answers3