Получить ли цвет фона и применить его к другому списку

Question

У меня есть два идентичных списка.

У каждого есть отдельный цвет, а другой нет.

Я пытаюсь получить каждый цвет фона li li и добавить каждый цвет к каждому 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

Записка th у вас есть опечатки во всех закрывающих тегах, это не </ll>, но </li>