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

时间:2015-04-02 10:24:05

标签: javascript jquery loops

<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'属性进行匹配,我有多个接收器。我应该循环吗?

2 个答案:

答案 0 :(得分:2)

在每个循环中执行。

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

答案 1 :(得分:0)

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>