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

Question

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

---

我试着用 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

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

有没有更好的方法来动态地执行此操作而不是编写 :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();

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

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

http://jsfiddle.net/fKPmc/