如何在其他列表的属性中复制列表内容？

Question

我想在其他动态列表的属性中创建 List 的内容副本。

---

我尝试使用jQuery完成此操作，我按如下方式完成：

HTML：

<ul class="main">
    <li>Alpha</li>
    <li>Beta</li>
    <li>Gamma</li>
    <li>Delta</li>
</ul>

<ul class="clone">
    <li>content 1</li>
    <li>content 2</li>
    <li>content 3</li>
    <li>content 4</li>
</ul>
<ul class="clone">
    <li>content 1</li>
    <li>content 2</li>
    <li>content 3</li>
    <li>content 4</li>
</ul>
[..etc..]

jQuery的：

var Alpha = $('ul.main li:nth-child(4n+1)').text();
var Beta = $('ul.main li:nth-child(4n+2)').text();
var Gamma = $('ul.main li:nth-child(4n+3)').text();
var Delta = $('ul.main li:nth-child(4n+4)').text();

$('ul.clone li:nth-child(4n+1)').attr('data-content', Alpha);
$('ul.clone li:nth-child(4n+2)').attr('data-content', Beta);
$('ul.clone li:nth-child(4n+3)').attr('data-content', Gamma);
$('ul.clone li:nth-child(4n+4)').attr('data-content', Delta);

jsFiddle

问题是我必须为每个:nth-child()写一个问题，以解决我想为nth-child(Xn+X)创建 LOOP 的问题，因为如果我有100个.main列表中的项目我想将这100个项目克隆到.clone中所有其他data-content列表（分别有100个项目）。

有没有更好的方法动态执行此操作，而不是为每个li编写 :nth-child(4n+1) ？

Answer 1

解决方案涉及循环从.main收集的内容数组。有很多种可能性。您可以通过.map：

轻松地将内容作为数组获取

var contents = $(".main li").map(function () {
    // $(this).text() is more compatible but more expensive
    return this.textContent;
}).get();

然后，您可以通过:nth-child方法获取元素的相对索引，而不是使用.index。

$(".clone li").attr("data-content", function () {
    return contents[$(this).index()];
});

http://jsfiddle.net/fKPmc/

Answer 2

这可能会：

首先我们创建一个目标值数组。

var contents = $.map($('ul.main li', function(element, index) {
    return $(element).text();
});

console.log(contents);
// => ['Alpha', 'Beta', 'Gamma', 'Delta']

然后我们需要在ul的所有.clone上使用一个循环ul。对于每个li，我们将再次循环其data-content子项，并使用与我们之前设置的contents数组匹配的索引设置$('ul.clone').each(function(index, ul) { $('li', ul).each(function (i, li) { $(li).attr('data-content', contents[i]); }); }); 的值。只要标记设置的方式与问题相符就可以了

{{1}}

我希望这很清楚。