Question

所以我有一个隐藏字段列表：

<ul class="reorderable">
    <li>Foo<input class="hiddenThing" type=hidden name="thing[0]" value=foo /></li>
    <li>Bar<input class="hiddenThing" type=hidden name="thing[1]" value=bar /></li>
    <li>Baz<input class="hiddenThing" type=hidden name="thing[2]" value=baz /></li>
</ul>

纯粹是信息性的，我不认为这与答案有关，但我们正在使用JQuery UI“可排序”插件：

<script type="text/javascript">
$(document).ready(function () {
    $('ul.reorderable').sortable({ update: stuffHappens; });
}
</script>

您需要从中理解的是，可排序插件允许用户任意重新排序这些元素。现在，我想要做的是实现一个恢复按钮。

<button value="Revert" onClick="revertList()" />

我想要根据隐藏输入的名称将列表元素按顺序放回。我想这将需要正则表达式（从名称中的括号中提取数字。thing[10]应该在thing[9]之后），我想JQuery会很方便。但是当我试图解决这个问题时，我正在画一个空白，可能是因为我不熟悉DOM元素的排序，也不熟悉JavaScript。

保持这种命名格式是必须的。

Answer 1

function revertList() {
    var $ul = $('ul.reorderable'),
        $inps = $ul.find('li').find('input.hiddenThing');

    for (var i = 0, il = $inps.length; i < il; i++) {
        $inps.filter('[name="thing['+i+']"]').closest('li')
             .detach().appendTo($ul);
    }
}

Demo →

Answer 2

我可能会使用标准数组排序，然后删除所有项目并将其添加回排序：

$('#reorder').click(function() {
    // get the list items and store references to them,
    // grabbing their names on the way
    var items = [];
    $('ul.reorderable li').each(function() {
        var name = $('input', this).attr('name'),
            // regex is overkill if you're always using the same format
            // this is quick, but a little hacky - parseInt stops
            // at non-numeric characters
            pos = parseInt(name.split("[")[1]);
        items.push({
            item: this, // store a reference to the DOM element
            pos: pos 
        });
    });
    // now sort by name
    items.sort(function(a,b) {
        return a.pos > b.pos ? 1 : -1;
    });
    // delete the items and add them back sorted
    var $ul = $('ul.reorderable');
    $ul.empty();
    // forEach() might be more elegant, but isn't cross-browser yet
    for (var x=0; x<items.length; x++) {
        $ul.append(items[x].item);
    }
});

此处的工作版本：http://jsfiddle.net/nrabinowitz/Ew2EX/3/

如果您拥有大量商品，这可能会变慢，但这比尝试对其进行重新排序要容易得多。

代码已更新以比较单位和双位数字（因为"2"＆gt; "11"）。

Answer 3

我知道这是一个旧线程，但是一旦用jQuery选择元素，对它进行排序实际上非常简单。

基于数组，您可以使用标准Array.prototype.sort()方法对其进行排序。对子元素进行排序后，您可以将它们追加到父元素中，而不必担心重复元素;它会起作用:)）

要从名称中取出数字索引，我选择只过滤掉任何不是数字的内容。

＆＃13;

$('.reorderable').append(function() {
  return $(this).children().sort(function(a, b) {
    var re = /\d+/,
        a_index = +a.name.match(re)[0],
        b_index = +b.name.match(re)[1];
    return a_index - b_index;
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="reorderable">
    <li>Foo<input class="hiddenThing" type=hidden name="thing[2]" value=foo /></li>
    <li>Bar<input class="hiddenThing" type=hidden name="thing[1]" value=bar /></li>
    <li>Baz<input class="hiddenThing" type=hidden name="thing[0]" value=baz /></li>
</ul>

＆＃13;

JavaScript基于名称命令DOM元素

3 个答案: