Javascript 使用jqueryui'更新排序顺序值；s可排序小部件

我有一个视图，其中显示了几个

div

。这些

div

可使用进行排序/拖动。
我试图根据div的位置更新输入字段的值。但是，我只做到了这一点：我正在更新整个

div

的

html

，而不是更新包含输入字段的

值。更新输入字段的
值
而不是整个div的html时，哪一个是最好的选择器

HTML

<div id="sortable" class="ui-sortable">
  <div class="ui-state-default">0<input id="sort_order_1" name="sort_order[]" type=text value="0"></div>
  <div class="ui-state-default">1<input id="sort_order_2" name="sort_order[]" type=text value="1"></div>
  <div class="ui-state-default">2<input id="sort_order_3" name="sort_order[]" type=text value="2"></div>
  <div class="ui-state-default">3<input id="sort_order_4" name="sort_order[]" type=text value="3"></div>
  <div class="ui-state-default">4<input id="sort_order_5" name="sort_order[]" type=text value="4"></div>
  <div class="ui-state-default">5<input id="sort_order_6" name="sort_order[]" type=text value="5"></div>
  <div class="ui-state-default">6<input id="sort_order_7" name="sort_order[]" type=text value="6"></div>
</div>


0
1.
2.
3.
4.
5.
6.

JavaScript

       $(function() {
          $('#sortable').sortable({
            start: function(event, ui) {
              var start_pos = ui.item.index();
              ui.item.data('start_pos', start_pos);
            },
            change: function(event, ui) {
              var start_pos = ui.item.data('start_pos');
              var index = ui.placeholder.index();


              cIndex = (start_pos < index) ? index - 2 : index - 1;
              ui.placeholder.prevAll('div').each(function() {
                $this = $(this);
                if ($this.is(ui.item)) {
                  return;
                }
                $this.html(cIndex);
                cIndex--;
              });

              cIndex = (start_pos < index) ? index : index + 1;
              ui.placeholder.nextAll('div').each(function() {
                $this = $(this);
                if ($this.is(ui.item)) return;
                $this.html(cIndex)
                cIndex++;
              });

              ui.item.html((start_pos < index) ? index - 1 : index);
            },
            axis: 'y'
          });
        });

$（函数（）{
$（“#可排序”）。可排序({
开始：功能（事件、用户界面）{
var start_pos=ui.item.index（）；
ui.项目数据（“开始位置”，开始位置）；
},
更改：功能（事件、用户界面）{
var start_pos=ui.item.data（'start_pos'）；
var index=ui.placeholder.index（）；
cIndex=（开始位置<指数）？指数-2：指数-1；
ui.placeholder.prevAll（'div'）。每个（函数（）{
$this=$（this）；
如果（$this.is（ui.item））{
回来
}
$this.html（cIndex）；
辛迪斯--；
});
cIndex=（开始位置<索引）？索引：索引+1；
ui.placeholder.nextAll（'div'）。每个（函数（）{
$this=$（this）；
如果（$this.is（ui.item））返回；
$this.html（cIndex）
cIndex++；
});
html（（开始位置<索引）？索引-1：索引）；
},
轴：“y”
});
});


我在stackoverflow上找到了，但是他们也没有更新任何输入字段值。
您所要做的就是在每个函数中添加
val（）
更新。我注释掉了
.html（）函数，因为它们将删除您的输入字段

上一页：

下一步：

分拣机：

//ui.item.html((start_pos < index) ? index - 1 : index);
ui.item.find('input[type=text]').val((start_pos < index) ? index - 1 : index);

//ui.item.html（（start\u pos

ui.placeholder.nextAll('div').each(function() {
    $this = $(this);
    if ($this.is(ui.item)) return;
    //$this.html(cIndex);
    $this.find('input[type=text]').val(cIndex);
    cIndex++;
});

//ui.item.html((start_pos < index) ? index - 1 : index);
ui.item.find('input[type=text]').val((start_pos < index) ? index - 1 : index);