March 6, 2012
Getting the height multiple elements aplying to siblings
Question by Christian Isai
I have this problem I dont know what im missing so far I have this code
I have a dropdown menu that inside has 1 big column and other 4 divs next to them, I have to make the other divs the same height of the first div.. I wrote this
$('.dropdown div:first-child').each(function(){
$this = $(this)
var $height = $this.height()
$(".dropdown div:first-child").siblings("div").css("height", $height)
});
the problem is that the variable $height is returning a 0 value.. do you know why Im not getting each height?
Thank you in advance
//edit
so you can have an Idea…
Answer by Henesnarfel
Check out your updated fiddle http://jsfiddle.net/DsBF2/1/
$('.dropdown div').each(function(){
$this = $(this);
var $height = $this.height();
$this.siblings("div").css("height", $height);
});
UPDATE
This code would be better as the above goes through every child div unnecessarily
$('.dropdown').each(function(){
$this = $(this);
var $div = $this.find("div:first-child");
var $height = $div.height();
$div.siblings("div").css("height", $height);
});
Answer by Starx
Try the following code. It should do what you ask for.
var height = 0;
$('.dropdown div:first-child').each(function(k,v) {
height = 0;
$(this).siblings("div").each(function(k2,v2) {
if(height == 0) {
height = $(this).height();
}
}).css('height', height);
});
Update
If you really want a trimmed out version, this should do it
$('.dropdown div').each(function(){
var height = $(this).height();
$(this).siblings("div").css("height", height);
});
