javascript - 克隆并插入，插入次数比预期多

Question

我有一个带有隐藏类“item”的样式元素。最初，该页面只有一个属于此类的元素。我只是使用这个隐藏元素作为模型，每次单击“添加项目”按钮时我都可以使用 jquery 抓取它并将其插入列表中，并在内部文本中包含正确的项目名称。

我想做的是克隆这个隐藏的“item”元素，并将其插入到网页上last item元素所在的位置之后。显示它，并将内部文本更改为我需要的任何内容。

我当前的实现没有按预期克隆/插入项目，尽管我相信它应该，但我可能遗漏了一些东西。

我的标记

<div class="item" style="border:1px solid blue; padding:7px; display:none;">hello</div>

添加项目

我的 JavaScript

$(".addItem").click(function(){

   //clone hidden item element blueprint
   $('.item').eq(0).clone().insertAfter('.item:last-child');


   //Change inner text of element
   $('.item:last-child').text("apples").show();
});

JSFiddle

http://jsfiddle.net/XPVAs/

Answer 1

假设您需要 :last 选择器，而不是 :last-child:

$(".addItem").click(function(){

    //clone hidden item element blueprint
    $('.item').eq(0).clone().insertAfter('.item:last');


    //Change inner text of element
    $('.item:last').text("apples").show();
});

这是一个演示:http://jsfiddle.net/XPVAs/3/