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

jquery中的

.css()方法接受回调函数，以便您可以使用它。

你可以试试这个：

$('.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>

匹配循环中具有属性的多个项目

2 个答案: