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

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/