在Jquery中使用.clone（）僅克隆列表中的特定項目

Question

我想將列表中的選定項添加到新列表中。例如，我只希望將香蕉添加到我的第二個列表中，我的函數中的以下代碼將coll-selected-list中的所有項添加到coll-group-list。我怎麼可能只做一個具體項目的克隆。任何提示都會很棒。

的jQuery：

$("#coll-selected-list li").clone().appendTo("#coll-grouped-list"); 

標記：

<ul id="coll-selected-list" class="droptrue sort-drop ui-sortable"> 
     <li class="sorted">apple</li> 
     <li class="sorted">pear</li> 
     <li class="sorted">banana</li> 
     <li class="sorted">grape</li> 
     <li class="sorted">guava</li> 
</ul> 

<ul id="coll-grouped-list"> 
</ul> 

Answer 1

您可以使用:contains選擇：

$("#coll-selected-list li:contains('banana')").clone().appendTo("#coll-grouped-list"); 

請注意，你傳遞給:contains字符串是區分大小寫的。

這是working example。

Answer 2

將自定義數據屬性和值添加到要克隆的項目，然後僅針對具有該數據屬性和值的項目。

例如

<ul id="coll-selected-list" class="droptrue sort-drop ui-sortable"> 
     <li class="sorted">apple</li> 
     <li class="sorted">pear</li> 
     <li class="sorted" data-action="clone">banana</li> 
     <li class="sorted">grape</li> 
     <li class="sorted">guava</li> 
</ul> 

<ul id="coll-grouped-list"> 
</ul> 

$('#coll-selected-list li[data-action="clone"]').clone().appendTo("#coll-grouped-list"); 

工作演示：

http://jsfiddle.net/QXEdn/

Answer 3

您可以添加類要克隆的元素如：

<ul id="coll-selected-list" class="droptrue sort-drop ui-sortable"> 
     <li class="sorted">apple</li> 
     <li class="sorted">pear</li> 
     <li class="sorted clone">banana</li> 
     <li class="sorted">grape</li> 
     <li class="sorted">guava</li> 
</ul> 

<ul id="coll-grouped-list"> 
</ul> 

// get elements with clone class 
$('#coll-selected-list li.clone]').clone().appendTo("#coll-grouped-list"); 

如果要克隆基於要素您可以使用的索引:eq選擇器：

// clone li containing bannana 
$('#coll-selected-list li:eq(2)]').clone().appendTo("#coll-grouped-list");