在jQuery中单击相应按钮后如何向上或向下移动li项目？答案

【问题标题】：How to move li items up or down after a corresponding button is clicked in jQuery?在jQuery中单击相应按钮后如何向上或向下移动li项目？
【发布时间】：2019-09-04 15:11:56
【问题描述】：

这是我正在解决的问题

网站需要一个列表，用户可以在其中对他们最喜欢的食物进行排名。编写 setup 函数，它应该在所有 Up 上注册点击处理程序！和下来！纽扣。向上！按钮应将列表项在列表中向上移动一位，而向下！按钮应将列表项在列表中下移一位。

例如，考虑以下代码：

document.body.innerHTML = `<ol>
  <li><button>Up!</button>Taco<button>Down!</button></li>
  <li><button>Up!</button>Pizza<button>Down!</button></li>
  <li><button>Up!</button>Eggs<button>Down!</button></li>
</ol>`;

setup();

如果按钮向上！点击 Pizza 列表项中的按钮，Pizza 应该是列表中的第一项，而 Taco 应该是第二项。

这是我迄今为止尝试过的：

function setup() {
  $.fn.moveUp = function() {
    before = $(this).prev();
    $(this).insertBefore(before)
  }

  $.fn.moveDown = function() {
    after=$(this).next();
    $(this).insertAfter(after)
  }

  $('li').find("button:contains('Up!')").click(function() {
    $(this).moveUp()
  })

  $('li').find("button:contains('Down!')").click(function() {
    $(this).moveDown()
  })
}

我认为 moveUp() 和 moveDown() 的创建可以完成工作，但我在这里遗漏了一些东西

【问题讨论】：

this，在点击处理程序中，是按钮。不是li 元素
您可以通过在方法调用之前将点击事件处理程序更改为 $(this).closest('li') 来保留大部分逻辑
很好，所以需要做 $(this).parent.moveUp() 等。谢谢

标签： jquery

【解决方案1】：

示例：https://jsfiddle.net/xhfo3qty/

您似乎在操作错误的元素。尝试为您的按钮类提供更好的监听器性能，并在回调中使用 .parent() 方法。我已经给出了按钮类，因为我不喜欢使用 find。我更喜欢使用直接选择器，但这不是必需的。

<ol>
  <li><button class="up">Up!</button>Taco<button class="down">Down!</button> </li>
  <li><button class="up">Up!</button>Pizza<button class="down">Down!</button></li>
  <li><button class="up">Up!</button>Eggs<button class="down">Down!</button></li>
</ol>


$.fn.moveUp = function() {
  before = $(this).prev();
  $(this).insertBefore(before)
}

$.fn.moveDown = function() {
  after=$(this).next();
  $(this).insertAfter(after)
}

$('.up').click(function() {
  $(this).parent().moveUp()
})

$('.down').click(function() {
  $(this).parent().moveDown()
})

【讨论】：