jquery - 每个循环的jQuery附加列表项无法附加到正确的位置

Question

我正在尝试将 ul 附加到每个循环的现有列表项，但它未能放置在我想要的正确位置。这是 jsfiddle 链接错误的结果。这就是我想要达到正确的结果

这是我的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>

一个想通过使用 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>
​

Answer 1

这应该可以解决问题：

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

我希望这就是你要找的。