匹配循環內的多個項目和屬性

Question

<div class="item" rel="a">1</div> 
<div class="item" rel="b">2</div> 

<div class="receive" rel="a">1</div> 
<div class="receive" rel="b">2</div> 

.item[rel='a'] { 
    width:50px; 
    height:50px; 
    background: pink; 
} 
.item[rel='b'] { 
    width:50px; 
    height:50px; 
    background: orange; 
    margin-left:20px; 
} 
.receive { 
    margin-top:20px; 
    border:1px solid; 
    width:50px; 
    height:50px; 
} 

如何讓接收器接收項目的顏色？我可以做

bg = $('.item').css('background'); 
$('.receive').css('background',bg); 

但我希望它能匹配使用'rel'屬性，我有多個接收器。我應該循環嗎？

Answer 1

做到在每個循環。

$('.item').each(function(idx) { 
    var rel = $(this).attr('rel'); 
    var bg = $(this).css('background'); 
    $('.recieve[rel="' + rel + '"]').css('background', bg); 
}); 

我想這就是你想要的。

您可以循環使用.item或.recieve，在一天結束時無所謂。
這裏是一個小提琴，以表明它的工作原理：http://jsfiddle.net/Lg6yw7bj/1/

Answer 2

.css()在jquery中的方法接受回調函數，所以你可以使用它。

你可以試試這個：

$('.recieve').addClass('item'); // just add the class to make it work. 
 

 
/*$('.recieve').css('background', function(i){ 
 
    return $('.item').eq(i).css('background'); 
 
});*/

.item[rel='a'] { 
 
    width: 50px; 
 
    height: 50px; 
 
    background: pink; 
 
} 
 
.item[rel='b'] { 
 
    width: 50px; 
 
    height: 50px; 
 
    background: orange; 
 
    margin-left: 20px; 
 
} 
 
.recieve { 
 
    margin-top: 20px; 
 
    border: 1px solid; 
 
    width: 50px; 
 
    height: 50px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="item" rel="a">1</div> 
 
<div class="item" rel="b">2</div> 
 

 
<div class="recieve" rel="a">1</div> 
 
<div class="recieve" rel="b">2</div>