Question

我正在使用JQuery Sortable UI我需要跟踪<li>的当前位置数组这里是代码

$(document).ready(function() {
    $('#sortable').sortable({
        update: function(event, ui) {

            $('#sortable').children().each(function(i) {
                var id = $(this).attr('data-post-id')
                    ,order = $(this).index() + 1;

                $('#console').val($('#console').val() + '' + id + '' + ',');

            });

        }
    });
});

＆安培;这是HTML

<ul id="sortable">
    <li data-post-id="1">Post 1</li>
    <li data-post-id="2">Post 2</li>
    <li data-post-id="3">Post 3</li>
    <li data-post-id="4">Post 4</li>
    <li data-post-id="5">Post 5</li>
    <li data-post-id="6">Post 6</li>
    <li data-post-id="7">Post 7</li>
</ul>

<input id="console" type="text" />

在排序时，我希望在输入区域内打印<li>的当前位置数组。

此代码工作正常，但：

在.each（）排序中，数组在输入区域内追加。我想要的是用新数组替换以前的数组

这是Fiddle，它会让你了解我在说什么。

我尝试在.change（）函数内部进行包装，但我没有正确使用它。

任何帮助将不胜感激！

由于

Answer 1

不是追加，而是将id推入每个（）

之外的数组中

$(document).ready(function() {
    $('#sortable').sortable({
        update: function(event, ui) {
            var foo = [];
            $('#sortable').children().each(function(i) {
                var id = $(this).attr('data-post-id')
                    ,order = $(this).index() + 1;
                foo.push(id);
            });
            $('#console').val(foo);
        }
    }); 
});

Answer 2

$('#sortable').sortable({
     update: function(event, ui) {
          $('#console').val("");
          $('#sortable').children().each(function(i) {
             var id = $(this).attr('data-post-id'),order = $(this).index() + 1;                  
             $('#console').val($('#console').val() + '' + id + '' + ',');              
           });          
     }     
});

通过在遍历可排序的子项之前重置#console的值，将只有当前可排序的子项。

.each（）函数中的JQuery .change（）函数

2 个答案: