CODEWITHSUNDEEP
javascriptjqueryhtmlcss
iD4ve
iD4ve

Reputation: 55

jQuery copying style to another element

my problem is the following:

I have something like this HTML CODE:

<div class="rsContent">
  <div class="rsImg" style="width:900px;height:900px; margin-left:-450px; margin-top: -450px;"></div>
  <div class="rsABBlock"></div>
  <div class="rsABBlock"></div>
</div>
<div class="rsContent">
  <div class="rsImg" style="width:1200px;height:1200px; margin-left:-600px; margin-top: -600px;"></div>
  <div class="rsABBlock"></div>
  <div class="rsABBlock"></div>
  <div class="rsABBlock"></div>
</div>

So what I want to do is take the style Attribute of the .rsImg Container and place It in the .rsABBlock elements underneath the .rsImg but only for those that are in the same .rsContent Container

So after the code I am looking for is run the result should look like this:

<div class="rsContent">
  <div class="rsImg" style="width:900px;height:900px; margin-left:-450px; margin-top: -450px;"></div>
  <div class="rsABBlock" style="width:900px;height:900px; margin-left:-450px; margin-top: -450px;"></div>
  <div class="rsABBlock" style="width:900px;height:900px; margin-left:-450px; margin-top: -450px;"></div>
</div>
<div class="rsContent">
  <div class="rsImg" style="width:1200px;height:1200px; margin-left:-600px; margin-top: -600px;"></div>
  <div class="rsABBlock" style="width:1200px;height:1200px; margin-left:-600px; margin-top: -600px;"></div>
  <div class="rsABBlock" style="width:1200px;height:1200px; margin-left:-600px; margin-top: -600px;"></div>
  <div class="rsABBlock" style="width:1200px;height:1200px; margin-left:-600px; margin-top: -600px;"></div>
</div>

The code I want to have only needs to be executed once. This is what I tried

jQuery(".rsContent").each(function(){
    var style_var = jQuery(".rsImg").attr("style");
    jQuery(".rsABBlock").each(function(){
        jQuery(this).attr("style",style_var);
    }); 
});

Upvotes: 1

Views: 280

Answers (3)

rynhe
rynhe

Reputation: 2529

Try this

jQuery(".rsContent").each(function(){    
    var style_var = jQuery(this).find(".rsImg").attr("style");   
    jQuery(this).find(".rsABBlock").each(function(){     
        jQuery(this).attr("style",style_var);    
    }); 
})

You have to add this.... jQuery(this).find

Upvotes: 3

Popnoodles
Popnoodles

Reputation: 28409

You can do this with less code 

    jQuery(".rsImg").each(function(){    
        jQuery(this).siblings().attr('style', jQuery(this).attr("style"));
        // or if there are other siblings and you need to specify rsABBlock
        // jQuery(this).siblings(".rsABBlock").attr('style', jQuery(this).attr("style"));
    })

http://jsfiddle.net/Pj8mY/1/

But to debug your original, you were missing a period in .find(".rsImg") and all you needed to do was target those child elements of the one in the each loop by using jQuery(this).find()

    jQuery(".rsContent").each(function(){    
        var style_var = jQuery(this).find(".rsImg").attr("style");
        jQuery(this).find(".rsABBlock").each(function(){     
            jQuery(this).attr("style",style_var);    
        }); 
    })

Working demo: http://jsfiddle.net/Pj8mY/

Upvotes: 0

ijemmy
ijemmy

Reputation: 1

Your inner ".rsABBlock" should start from the current ".rsImg" that you are itereating.

jQuery("div.rsContent > div.rsImg").each(function () { //Get DIV with class .rsImg which is the child of a DIV with class .rsContent
    var style_var = jQuery(this).attr("style");
    jQuery(this).siblings("div.rsABBlock").each(function () { //Iterate through the siblings, not all .rsABBlock. 
        jQuery(this).attr("style", style_var);
    });
});

If all you want is just replacing the style, you don't need to use ".each" in the inner loop. Just use ".attr". It will be called for all selected element.

jQuery("div.rsContent > div.rsImg").each(function () { //Get DIV with class .rsImg which is the child of a DIV with class .rsContent
    var style_var = jQuery(this).attr("style");
    jQuery(this).siblings("div.rsABBlock").attr("style", style_var);
});

Upvotes: 0

Related Questions