JQuery копирование стиля к другому элементу

Question

моя проблема заключается в следующем:

У меня есть что-то вроде этого HTML код:

<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> 

Так что я хочу сделать, это взять атрибут стиля .rsImg контейнера и поместите его в .rsABBlock элементов расположенных под .rsImg, но только для тех, которые находятся в том же .rsContent контейнер

Так после кода я ищу это запустить результат должен выглядеть следующим образом:

<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> 

Код, который я хочу выполнить только один раз. Это то, что я пытался

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

Answer 1

Попробуйте

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);  
    }); 
}) 

Вы должны добавить this .... jQuery(this).find

Answer 2

Вы можете сделать это с меньшим количеством кода

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/

Но отладить оригинал, вы пропускали период в .find(".rsImg") и все, что вам нужно сделать, это цель этих дочерних элементов один в петле each с помощью 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);  
     }); 
    }) 

Работа демо: http://jsfiddle.net/Pj8mY/

Answer 3

Ваш внутренний «.rsABBlock» должен начинаться с текущего «.rsImg», который вы делаете.

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); 
    }); 
}); 

Если все, что вы хотите просто заменить стиль, вам не нужно использовать «.each» во внутреннем цикле. Просто используйте «.attr». Он будет вызываться для всех выбранных элементов.

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); 
});