克隆和插入，插入比預期更多的時間

我有隱藏類「項目」的樣式元素。最初，該頁面只有這個類的一個元素。我只是使用這個隱藏的元素作爲模型，我可以抓住jquery，並在每次單擊'add item'按鈕時將其插入列表中，並在內部文本中輸入正確的項目名稱。克隆和插入，插入比預期更多的時間

我想要做的就是克隆這個隱藏的'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/

來源

2013-01-15 AnchovyLegend

更多的代碼，請。最好在jsfiddle – Learner

隱藏的'.item'部分與可見列表相同嗎？如果不是，那麼「.item：last-child」會和列表中的最後一個元素匹配。另外，如果你多次綁定這個處理程序（如果這個代碼被重複），那麼該元素將被插入多次。（因爲，[發佈的代碼工程]（http://jsfiddle.net/RWG9N/） - 我們需要更多的信息來幫助） – nbrooks

@Mihir看到更新。 – AnchovyLegend

假設你需要: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/

來源

2013-01-15 19:32:27

+1謝謝，這似乎在jsFiddle中運行良好，並且在我的代碼中也更好。我不完全確定爲什麼，但就我而言，當我將其應用於我的代碼時，它爲每次點擊添加了兩個項目元素而不是一個。任何想法爲什麼這可能會發生？ – AnchovyLegend

不能肯定地說。在你的小提琴中它根本不起作用。 –

基本上，正如jquery doc所說：http://api.jquery.com/last-child-selector/'while：last只匹配一個元素，：last-child可以匹配多個：每個parent都有一個。它看起來像你有一些結構返回多個元素：last-child選擇器 –

變化

$('.item:last-child').text("apples").show();

到

$('.item:last').text("apples").show();

閱讀以下鏈接仔細：

http://api.jquery.com/last-child-selector/

http://api.jquery.com/last/

來源

2013-01-15 19:49:06 Learner

克隆和插入，插入比預期更多的時間

回答

相關問題