Question

我有多个ul，每个ul都有多个li。每当有人点击li项目时，它就会被选中，然后有向上和向下按钮可以上下移动选定的li项目。下面是按钮的jquery代码

    //onclick of move up button ,move the item up in the list
$("#btn-move-up").click(function () {
    $item = $(".highlight");
    $before = $item.first().prev();
    $item.insertBefore($before);
});

//onclick of move down button, move the item down in the list
$("#btn-move-down").click(function () {
    $item = $(".highlight");
    $after = $item.last().next();
    $item.insertAfter($after);
});

我想要的是只允许li项目在相应的列表中移动。例如如果有两个列表

<ul id="1">
<li>item 1 </li>
<li>item 2 </li>
<li>item 3</li>
</ul>

<ul id="2">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>

如果有人点击第一个列表的第2个项目和第二个列表的第3个项目然后点击向上移动按钮我只希望它们在他们尊重的列表中向上移动并且不希望将li项目复制到其他列表中然后现在正在发生变化。知道如何实现这一目标吗？

Answer 1

让我们分解您的代码：

$item = $(".highlight");

获取所有突出显示的项目（仅假设为li）

$before = $item.first().prev();

.first获得第一个，然后是li以上

$item.insertBefore($before);

将所有项目放在前面

因为$item是项目的集合/数组（这就是你使用.first的原因），所以任何操作都适用于整个数组。

您可以将最后一行更改为：

$item.first().insertBefore($before);

然后只有一个会一次向上移动。

或者，一次处理一个项目，例如：

$("#btn-move-up").click(function () {
    $items = $(".highlight");
    $items.each(function(index) {
        $before = $(this).prev();
        $(this).insertBefore($before);
    });
});

Answer 2

根据您告诉我们的内容，尝试一下

//onclick of move up button ,move the item up in the list
$("#btn-move-up").click(function () {
    $(".highlight").each(function()
    {
      $item = $(this);
      $before = $item.first().prev();
      $item.insertBefore($before);
   })
});

//onclick of move down button, move the item down in the list
$("#btn-move-down").click(function () {
    $(".highlight").each(function()
    {  
      $item = $(this);
      $after = $item.last().next();
      $item.insertAfter($after);
    })
});

如何允许只在一个列表中移动li项目？

2 个答案: