Question

我在jquery代码中有以下代码，可以通过单击向上和向下按钮在列表中向上或向下移动列表项。

            $("#btn-move-up").click(function () {
            $item = $(".highlight");
            $before = $item.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.next();
            $item.insertAfter($after);
        });

代码适用于单个项目，但如果您选择多个项目，它会意外开始表现working fiddle here。有人可以指出我的代码中的错误或任何其他更好的解决方案吗？

Answer 1

需要在插入之前选择列表的第一项，并在插入之前选择最后一项。否则，它会在突出显示的每个项目之前或之后插入：

＆＃13;

$("#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);
});


$('ul').on("click", "li", function(e) {
  if ($(this).hasClass('highlight')) {
    $(this).removeClass('highlight');
  } else {

    $(this).addClass('highlight');

  }
  e.stopPropagation();
});

＆＃13;

.highlight {
  background-color: #ccc;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="btn-move-up" class="btn btn-info" data-toggle="tooltip" data-placement="right" title="Up"><i class="fa fa-arrow-up"></i>Up</button>

<button type="button" id="btn-move-down" class="btn btn-info" data-toggle="tooltip" data-placement="right" title="Down"><i class="fa fa-arrow-down"></i>Down</button>

<ul id="fields">
  <li>Ist</li>
  <li>2nd</li>
  <li>3rd</li>
  <li>4th</li>
</ul>

＆＃13;

无法在jquery中向上或向下移动列表中的多个项目

1 个答案: