Question

我正在尝试仅将列表中的选定项添加到新列表中。因此，例如，我只希望将香蕉添加到我的第二个列表中，我的函数中的以下代码将coll-selected-list中的所有项目添加到coll-grouped-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

将自定义数据属性和值添加到要克隆的项目，然后仅定位具有该数据属性和值的项目。

<强> e.g。

<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");

使用Jquery中的.clone（）仅克隆列表中的特定项

3 个答案: