在2個列表之間移動列表項

Question

快速瀏覽：4列，每列都有它自己的包含所有可用類別的ul.category，以及ul.filter，這是ul.category中每個列表項應該去的地方。所有這些東西都應該留在該列中。

jQuery的

$("ul.category li.unselected").click(function() { 
    $(this).removeClass("unselected").addClass("selected"); 
    $("ul.filter").append(this); 
}); 
$("ul.filter li.selected").click(function() { 
    $(this).removeClass("selected").addClass("unselected"); 
    $("ul.category").append(this); 
}); 

和HTML，這只是一列，但有3個這樣的。

<div class="column themes"> 
    <ul class="filter"> 
     <!-- here go the clicked list-items --> 
    </ul> 
    <ul class="category"> 
     <li class="unselected"></li> 
     <li class="unselected"></li> 
     <li class="unselected"></li> 
    </ul> 
</div> 

那麼，這是什麼一樣權，是它改變的點擊列表項的類.selected併成功地做了CSS的變化，因爲它應該。什麼是錯誤，而不是添加列表項，我只點擊了ul.filter在同一列中，它將該列表項添加到每列中的ul.filter（基本上覆制它）。另外，單擊ul.filter中的列表項不會將該類更改回.unselected，並且不會將其移回ul.category。

簡而言之：尋找一種方法可以在需要工作的列中完成這項工作，並且可以修復將列表項移回原處。

Answer 1

它將項目追加到所有列，因爲您沒有選擇特定的列來追加它們。更改2行代碼做追加到這些...

$(this).closest("div.column").find("ul.filter").append(this); 

和

$(this).closest("div.column").find("ul.category").append(this); 

，做了搜索向上從點擊Li和尋找最近的div元素與類.COLUMN並在那裏追加。