jQuery 追加顺序

虽然很简单，但我就是不明白为什么这不起作用。

我需要将一个 div append 到文档正文，然后再次添加相同 div 的副本但隐藏，然后添加另一个 div，然后再次添加另一个相同 div 的副本但隐藏，依此类推...

    $.each(myObj.items, function(i, item) { 
 
        // createItem simply finds an html fragment in the document, 
        // clones it and returns it 
        var $i = createItem(item); 
 
        // add a div first that clears floats - this is needed before every item 
        $('body').append('<div class="clear"/>'); 
 
        // append a clone of the html fragment 
        $('body').append($i.clone()); 
 
        // add another div that clears floats 
        $('body').append('<div class="clear"/>'); 
 
        // append a clone of the html fragment but hide it 
        $('body').append($i.clone().addClass('hidden')); 
 
    }); 

我期待:

    <body> 
        <div class="clear"/> 
        <div class="item">item</div> 
 
        <div class="clear"/> 
        <div class="item hidden">item</div> 
 
        <div class="clear"/> 
        <div class="item">item</div> 
 
        <div class="clear"/> 
        <div class="item hidden">item</div> 
        ... 
    </body> 

但是我明白了..

    <body> 
        <div class="clear"/> 
        <div class="item">item</div> 
 
        <div class="clear"/> 
        <div class="item">item</div> 
 
        <div class="clear"/> 
        <div class="item hidden">item</div> 
 
        <div class="clear"/> 
        <div class="item">item</div> 
 
        <div class="clear"/> 
        <div class="item hidden">item</div> 
        ... 
    </body> 

为什么第一个会跳过？

编辑

我的源 html 是这样的:

    <html> 
        <body> 
            <div class="template hidden">..</div> 
        </body> 
    </html> 

我克隆模板 div，将其返回到我的函数，添加一个 div (class='clear')，然后添加返回的 div 的克隆，然后添加另一个 div (class='clear')，然后添加返回的另一个克隆分区

我的列表中的项目不超过 5 个。

编辑2

愚蠢的用户错误...代码工作正常。我没有意识到我的第一行是硬编码的而不是自动生成的。

对不起大家...(感觉很愚蠢)

请您参考如下方法:

您是否正在克隆一组现有的 div？ IE。您的页面上已经有一个克隆，因此您的函数会克隆并添加一个常规克隆，然后添加另一个隐藏克隆。