如何切换列表项上下位置并同步更新同类名隐藏输入框的value值

你只需要在每次完成列表项位置移动后，遍历所有列表项重新赋值.order输入框的值即可，这种方式逻辑简单兼容性好，不需要区分上移/下移场景：

$(function() {
  // 统一更新所有order输入框的值
  function refreshOrderValues() {
    $('li').each(function (idx) {
      // 按当前列表顺序从1开始赋值
      $(this).find('input.order').val(idx + 1)
    })
  }

  $('.up').on('click', function(e) {
    e.preventDefault()
    var wrapper = $(this).closest('li')
    // 已经是第一条不执行上移
    if (!wrapper.prev().length) return
    wrapper.insertBefore(wrapper.prev())
    refreshOrderValues()
  })
  
  $('.down').on('click', function(e) {
    e.preventDefault()
    var wrapper = $(this).closest('li')
    // 已经是最后一条不执行下移
    if (!wrapper.next().length) return
    wrapper.insertAfter(wrapper.next())
    refreshOrderValues()
  })
})

代码说明 #

• 封装独立的refreshOrderValues公共方法，遍历所有li元素，按照当前渲染顺序给每个li下的.order输入框赋值，和你要求的仅通过类名定位元素的规则完全匹配
• 补充了边界判断逻辑，避免首位/末位元素点击移动时出现DOM结构异常
• 补充e.preventDefault()阻止a标签默认的锚点跳转行为，避免点击按钮触发页面回弹

内容的提问来源于stack exchange，提问作者Ali