jquery - 获取 li 背景颜色并将其应用于另一个列表

Question

我有两个相同的列表。

一个的每个 li 都有特定的颜色，另一个则没有。

我正在尝试获取每个 li 背景颜色并将每种颜色添加到每个 li。

我犯了一个错误(在 codepen 中显示)，目前正在将最后一个 li 颜色添加到第二个列表中的所有 li 元素。

See my codepen.

<ul id="toCopy">
 <li class="red">List Item</ll>
 <li class="green">List Item</ll>
 <li class="blue">List Item</ll>
</ul>

<ul id="copyTo">
 <li>List Item</ll>
 <li>List Item</ll>
 <li>List Item</ll>
</ul> 


$('#toCopy').each(function () {
 $('li', this).each(function () {
  bgcolor = $(this).css('backgroundColor');
  var arr = jQuery.makeArray( bgcolor );

    for(var i=0; i< arr.length; i++) {
     $('#copyTo li').each(function () {
       $(this).css("background-color",arr[i]);
     })
    }

    })
})

我哪里出错了？

谢谢。

Answer 1

您要定位第二个列表中的所有元素，您可能可以改用索引来定位

$('#toCopy li').each(function () {
    var bgcolor = $(this).css('backgroundColor');

    $('#copyTo li').eq( $(this).index() ).css('backgroundColor', bgcolor);
});

FIDDLE

你甚至可以反过来做

$('#copyTo li').css('backgroundColor', function() {
    return $('#toCopy li').eq($(this).index()).css('backgroundColor');
});

FIDDLE

请注意，您在所有结束标签中都有拼写错误，不是 </ll>但是</li>