如何使用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