jquery - 在 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

它将项目附加到所有列，因为您没有选择将它们附加到的特定列。更改附加到这些的两行代码...

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

和

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

从单击的 li 向上进行搜索，找到最近的带有 .column 类的 div 元素，并在此处追加。