CODEWITHSUNDEEP
javascriptjquery
Nima Parsi
Nima Parsi

Reputation: 2110

jQuery: Get parent height and assign to a selector inside of it

I'm trying to find a way to change a selector's height to its parent's height via jQuery but haven't found any solution yet, you can clearly see in this page I need to get the height of each #accordion ul li and set it to the .status-green

http://jsbin.com/udajen/8/edit

Thank you!

Upvotes: 1

Views: 3810

Answers (2)

amiry jd
amiry jd

Reputation: 27585

If you want to make the .status-greens height same as associated .sentence height, you must calculate their padding-top and padding-bottom too. here is the complete code: http://jsfiddle.net/Javad_Amiry/REPuQ/1/

and the js will be:

$("#accordion .sentence").each(function () {
    var current = $(this).height();
    var p_top = $(this).css("padding-top");
    var p_bot = $(this).css("padding-bottom");
    $(this).parent().find(".status-green").css({
        height:current,
        "padding-top":p_top,
        "padding-bottom":p_bot
    });
});

Upvotes: 1

Anatoly
Anatoly

Reputation: 15530

You can see the work example here: http://jsfiddle.net/mikhailov/yQfFc/

$("#accordion li").each(function(index, value) {
    var $value = $(this);
    var current = $value.height() - 2;
    $value.find(".status-green").height(current);
});

the second option is to iterate through .sentence divs:

$("#accordion .sentence").each(function(index, value) {
    var $value = $(this);
    var current = $value.height() + 10;
    $value.siblings(".status-green").height(current);
});

Upvotes: 1

Related Questions