Question

I have two list. An unordered list and a set of divs which are acting as a list. The unordered list has 4 list items and there are also 4 divs.

What I am trying to achieve is to copy the heading from each div and place it in each list item. In order words the heading of first div should correspond to that of the first list-item.

All i have been able to achieve thus far, is to loop through the divs and alert the heading which i want to copy as shown below but i am not sure how to proceed.

<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

try this:

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