JavaScript 根据名称对 DOM 元素进行排序

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);
    }
}

演示→

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" > "11"）。

Answer 3

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

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

为了从名称中获取数字索引，我选择简单地过滤掉任何不是数字的内容。

$('.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;
  });
});

<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>