0

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

例子

我试图用 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 a 编写:nth-child()以便解决我想为LOOP创建的问题nth-child(Xn+X)，因为如果我在.main列表中有 100 个项目，我想将这 100 个项目克隆到所有其他.clone列表（分别有 100项目）在data-content。

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

4

2 回答 2

1

这可能会：

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

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

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

那么我们将需要一个循环所有ul的类.clone。对于 each ，我们将在其子ul节点上再次循环，并使用与我们之前设置的数组匹配的索引来设置值。只要按照问题中的方式设置标记，这将起作用lidata-contentcontents

$('ul.clone').each(function(index, ul) {
    $('li', ul).each(function (i, li) {
        $(li).attr('data-content', contents[i]);
    });

});

我希望这足够清楚。

于 2013-10-01T15:25:45.603 回答
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/

于 2013-10-01T15:21:09.443 回答