あるリスト項目から別の項目に子要素をコピーする

Question

私は2つのリストを持っています。順序付けられていないリストと、リストとして機能している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/