javascript - 如何根据内容对嵌套的 div 进行排序

Question

我有以下 HTML 架构

<div id="txm_left_column">
    <div class="id">
        <h2>Some Name1</h2>
        <div>// another list</div>
    </div>
    <div class="id">
        <h2>Some Name2</h2>
        <div>// another list</div>
    </div>
</div>

用户能够将项目添加到该列表和所有Divs应按 h2 中名称的字母顺序排列. 我有两个选择

1) 我需要能够在字母顺序正确的 2 个 div 之间插入一个新项目

2) 完全重新组织列表。

我的方法是选项 2，对 Divs 进行排序按 h2 中名称的字母顺序排列

我想出了以下代码来尝试对其进行排序，但此代码创建了一个新的已排序列表 H2没有 div秒。然后我尝试通过使用相同的函数来执行选项 1)，但尝试插入类似这样的东西 (upA < upB) ? -1 : (NEW_ITEM_NAME> upB) ? 1 : 0但这会导致问题，因为这不会破坏排序。

我想知道两件事，一个是我怎么能破坏排序，因为 return 0 不会破坏它。或关于如何组织我的列表的任何帮助。

谢谢

jQuery("#txm_left_column > div").children("h2").sort(function(a, b) {
    var upA = jQuery(a).text().toUpperCase();
    var upB = jQuery(b).text().toUpperCase();
    return (upA < upB) ? -1 : (upA > upB) ? 1 : 0;
}).appendTo(selector);

Answer 1

but this code creates a new List of ordered H2s without the divs.

那是因为您正在对 h2 元素而不是 div 元素进行排序:

jQuery("#txm_left_column > div").sort(function(a, b) {
    var upA = jQuery('> h2', a).text().toUpperCase();
    var upB = jQuery('> h2', b).text().toUpperCase();
   // ...
}).appendTo(selector);