Question

我有两个清单。无序列表和一组充当列表的div。无序列表有4个列表项，还有4个div。

我想要实现的是从每个div复制标题并将其放在每个列表项中。换句话说，第一个div的标题应该与第一个列表项的标题相对应。

到目前为止我能够实现的是循环div并提醒我要复制的标题，如下所示，但我不知道如何继续。

<div class="container">
    <div class="nav-list">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
     </div>
    <div class="tab-list">
        <div class="tab-item">
            <h3>To be copied</h3>
        </div>
        <div class="tab-item">
            <h3>To be copied</h3>
        </div>
        <div class="tab-item">
            <h3>To be copied</h3>
        </div>
        <div class="tab-item">
            <h3>To be copied</h3>
        </div>
    </div>
</div>


$('.tab-list .tab-item').each(function(index) {
    alert(index + ': ' + $(this).children('h3').text());
});

Answer 1

试试这个：

$('.tab-list .tab-item').each(function(index) {
    $('.nav-list').children('ul').children().eq(index).html($(this).children('h3').text());
});

Answer 2

这个小提琴应该可以解决问题：http://jsfiddle.net/pndCd/

Answer 3

试试这个：

var list = $('.nav-list li');
$('.tab-list .tab-item').each(function(i) {
    list.eq(i).text($(this).find('h3').text())
});

请参阅http://jsfiddle.net/EDpM7/

Answer 4

试试这个：

$('.tab-list .tab-item').find('h3').each(function(index) {
    that = $(this).text();
    $('li').eq(index).text(that + $('li').eq(index).text())
});

http://jsfiddle.net/kuFDT/3/

你也可以克隆h3标签而不是复制他们的文本：

$('.tab-list .tab-item').find('h3').each(function(index) {
    that = $(this).clone();
    $('li').eq(index).before(that)
});

http://jsfiddle.net/kuFDT/14/

将子元素从一个列表项复制到另一个列表项

4 个答案: