CODEWITHSUNDEEP
jqueryhtml-listseach
Kamaal ABOOTHALIB
Kamaal ABOOTHALIB

Reputation: 3548

jQuery append list items with each loop fails to append to correct place

I'm trying to append ul to existing list items with each loop but its fails to place at correct position that i want. here is the jsfiddle link wrong result. this is what i want to achieve correct result

this is my html

<ul class="rows">
 <li>row</li>
 <li>row</li>
 <li>row</li>
 <li>row</li>
 <li>row</li>
</ul>
<ul class="ins">
    <li>columns</li>
    <li>columns</li>
</ul>
<ul class="ins">
    <li>columns</li>
    <li>columns</li>
</ul>
<ul class="ins">
    <li>columns</li>
    <li>columns</li>
</ul>

<ul class="ins">
    <li>columns</li>
    <li>columns</li>
</ul>
<ul class="ins">
    <li>columns</li>
    <li>columns</li>
</ul>

a want to achieve this structure by using jQuery append

<ul class="rows">
    <li>
        row
        <ul class="ins">
            <li>columns</li>
            <li>columns</li>
        </ul>
    </li>
    <li>
        row
        <ul class="ins">
            <li>columns</li>
            <li>columns</li>
        </ul>
    </li>
    <li>
        row
        <ul class="ins">
            <li>columns</li>
            <li>columns</li>
        </ul>
    </li>
    <li>
        row
        <ul class="ins">
            <li>columns</li>
            <li>columns</li>
        </ul>
    </li>
    <li>
        row
        <ul class="ins">
            <li>columns</li>
            <li>columns</li>
        </ul>
    </li>
    <li>
        row
        <ul class="ins">
            <li>columns</li>
            <li>columns</li>
        </ul>
    </li>
</ul>
​

Upvotes: 1

Views: 460

Answers (1)

Tims
Tims

Reputation: 2007

This should do the trick:

$('.ins').each(function(index,e){
    $('.ins').eq(index).appendTo($('.rows').children().eq(index));
});

I hope this is what you are looking for.

Upvotes: 2

Related Questions