jQuery实现上移,下移效果

要使用jQuery实现列表项的上移和下移效果，可以编写两个函数，分别用于将选中列表项上移一个位置或下移一个位置。以下是实现这两个功能的示例代码：

HTML部分：

<ul id="myList">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>
 
<button id="btnUp">上移</button>
<button id="btnDown">下移</button>

jQuery部分：

$(document).ready(function() {
  $('#btnUp').click(function() {
    moveUp($('#myList li.selected').prev());
  });
 
  $('#btnDown').click(function() {
    moveDown($('#myList li.selected').next());
  });
});
 
function moveUp(item) {
  if (item.length && !item.is('#myList li:first-child')) {
    item.prev().before(item);
  }
}
 
function moveDown(item) {
  if (item.length && !item.is('#myList li:last-child')) {
    item.next().after(item);
  }
}

在这个例子中，我们假设列表项中有一个类 .selected 来表示当前选中的项。moveUp 函数检查是否存在上一个元素，并且当前选中的元素不是列表中的第一个元素，如果条件满足，就将当前选中的元素移动到它之前的位置。同样，moveDown 函数检查是否存在下一个元素，并且当前选中的元素不是列表中的最后一个元素，如果条件满足，就将当前选中的元素移动到它之后的位置。