Lenny Lenny - 10 days ago 4
CSS Question

How do I give individual elements their own values in an each function?

My goal is to go through a set of parent wrappers and take the height value of the child div.left and set div.right to the same value. The code kind of works, but with the exception that when i have multiple parent wrappers they all become the same height instead of adapting individually.

Any pointers on what I'm doing wrong? Should i do

$('.paragraphs-item-text-with-image div.content').each(function(){
instead – and if yes, how do I target the div.left/right then while using
$(this)
?

function myfunction() {

var contentHeight = 0;

$('.paragraphs-item-text-with-image div.left').each(function(){

contentHeight = $(this).height();

$('#page_paragraphs_wrapper .paragraphs-item-text-with-image .right img').height(contentHeight);
console.log('biggestHeight'+contentHeight);
});

};


HTML structure for each parent is basically:

<div id="paragraphs-item-text-with-image">
<div class="content">
<div class="left">
Text content
</div>
<div class="right">
<img src="">
</div>
</div>
</div>

Answer

Try this,

function myfunction() {

    var contentHeight = 0;  

    $('.paragraphs-item-text-with-image div.left').each(function(){  

            contentHeight = $(this).height();  

            $(this).parent().find('div.right img').height(contentHeight);
            console.log('biggestHeight'+contentHeight);
    });  

};

or you could use .closest(selector) as,

function myfunction() {

    var contentHeight = 0;  

    $('.paragraphs-item-text-with-image div.left').each(function(){  

            contentHeight = $(this).height();  

            $(this).closest('.paragraphs-item-text-with-image').find('div.right img').height(contentHeight);
            console.log('biggestHeight'+contentHeight);
    });  

};
Comments