如何使用jQuery添加和删除UL中的LI？

如何使用jQuery从无序列表中添加和删除项目？当我在列表中的项目1双击它应该从列表1中删除，并添加到列表2 当然，周围的其他方法，以及...如何使用jQuery添加和删除UL中的LI？

我已经得到了以下列表：

<ul id='attached'> 
    <li id='itemID_1' ondblclick='removeAttached(&#39;itemID_1&#39;)'>Item</li> 
    <li id='itemID_2' ondblclick='removeAttached(&#39;itemID_2&#39;)'>Item</li> 
    <li id='itemID_3' ondblclick='removeAttached(&#39;itemID_3&#39;)'>Item</li> 
    <li id='itemID_4' ondblclick='removeAttached(&#39;itemID_4&#39;)'>Item</li> 
</ul> 

<ul id='non-attached'> 
    <li id='itemID_5' ondblclick='addAttached(&#39;itemID_5&#39;)'>Item</li> 
    <li id='itemID_6' ondblclick='addAttached(&#39;itemID_6&#39;)'>Item</li> 
    <li id='itemID_7' ondblclick='addAttached(&#39;itemID_7&#39;)'>Item</li> 
    <li id='itemID_8' ondblclick='addAttached(&#39;itemID_8&#39;)'>Item</li> 
</ul>

我的想法是这样的：

<script type='text/javascript'>") 
    function addAttached(i) { $('#non-attached').remove(i); $('#attached').append(i); };") 
    function removeAttached(i) { $('#attached').remove(i); $('#non-attached').append(i); };") 
</script>")

但我可能是相当在这里下车？

来源

2011-10-06 Behrens

为什么不先试试这个？ –

如果要移动的东西来回，最好的办法是event delegation：

<ul id='attached'> 
    <li id='itemID_1'>Item</li> 
    <li id='itemID_2'>Item</li> 
    <li id='itemID_3'>Item</li> 
    <li id='itemID_4'>Item</li> 
</ul> 

<ul id='non-attached'> 
    <li id='itemID_5'>Item</li> 
    <li id='itemID_6'>Item</li> 
    <li id='itemID_7'>Item</li> 
    <li id='itemID_8'>Item</li> 
</ul>

$("#attached").delegate("li", "dblclick", function() { 
    $("#non-attached").append(this); 
}); 

$("#non-attached").delegate("li", "dblclick", function() { 
    $("#attached").append(this); 
});

这将检测到点击该泡到你的列表中的li元素。然后它会将元素移动到另一个列表。

JSFiddle：http://jsfiddle.net/TYwPU/

来源

2011-10-06 13:32:53 Dennis

我看到它在小提琴中工作，但是如果我复制/粘贴到我的asp文档中，它就不会工作，而且我不会错误：（ – Behrens

）您是否将代码放在'$（document）.ready（function （）{...}）;'block？ – Dennis

是的，我是：/我只是将全部内容添加到新文档中，并且它的工作方式就像一个魅力一样，所以我不知道为什么它不会在我需要的文档中工作它可能是它是干扰我的jQueryUI选项卡？ – Behrens

你不需要remove的元素，你可以叫appendTo：

$("#attached li").dblclick(function() { 
    $(this).appendTo("#non-attached"); 
}); 
$("#non-attached li").dblclick(function() { 
    $(this).appendTo("#attached"); 
});

这里有一个working example。请注意，上面的代码应放置在一个ready事件处理程序中，并且它不需要内联事件处理程序。根据意见

因为元素从DOM移除并重新连接在其他地方

更新，它失去这是绑定了事件处理程序。这意味着你需要使用jQuery的live或delegate方法，结合事件处理现在选择匹配的元素或将来：

所有的

$("#attached li").live("dblclick", function() { 
    $(this).appendTo("#non-attached"); 
}); 
$("#non-attached li").live("dblclick", function() { 
    $(this).appendTo("#attached"); 
});

来源

2011-10-06 13:24:39

尼斯职能詹姆斯..虽然：它删除，但没有添加..：/ – Behrens

啊，我明白你的意思。给我一秒钟来更新它。 –

@erizias - 查看我的更新（我已经更新了示例小提琴）。 –

首先，你应该避免编写内嵌的JavaScript。它使调试和维护代码库变得更加困难。我建议你读JavaScript事件下面的文章：

Quirksmode - Early Event Handlers

Quirksmode - Traditional event registration model

这种类型的事件处理不应该与jQuery的混合。遵循@ james-allardice示例，并尝试学习如何正确使用javacript。我建议你阅读jQuery文档和教程here。

另外，如果你急着，你可以尝试更具吸引力的JQuery UI Sortable lists。

来源

2011-10-06 13:31:40