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

JavaScript order DOM elements based on name

本文关键字：元素 排序 DOM JavaScript      更新时间：2023-09-26

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

<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 进行正则表达式。

必须保留此命名格式。

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

演示→

我可能会使用标准的数组排序，然后删除所有项目并将它们重新排序：

$('#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"）。

我知道

这是一个古老的线程，但是一旦您使用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>

相关文章：