3

我有以下 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

我想出了下面的代码来尝试订购它，但是这段代码创建了一个新的有序H2s 列表，没有divs。然后我尝试通过使用相同的函数来执行选项 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);
4

2 回答 2

4

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

That's because you are sorting h2 elements and not the div elements:

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);
于 2013-08-15T14:28:15.680 回答
0

想发表评论但未达到“50 声望”配额，

引入重复项时，Vohuman 的答案是有问题的：

<div id="txm_left_column">
<div class="id">
    <h2>80</h2>
    <div>// another list for name 80</div>
</div>
<div class="id">
    <h2>80</h2>
    <div>// another list for name 80</div>
</div>
<div class="id">
    <h2>81</h2>
    <div>// another list for name 81</div>
</div>
<div class="id">
    <h2>100</h2>
    <div>// another list for name 100</div>
</div>
<div class="id">
    <h2>100</h2>
    <div>// another list for name 100</div>
</div>
</div>

-

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

结果：

81
// another list for name 81

80
// another list for name 80

80
// another list for name 80

100
// another list for name 100

100
// another list for name 100

见http://jsfiddle.net/std57rm4/

仅在引入您要排序的重复名称或数字时才会发生这种情况

目前我没有解决方案，但它应该类似于计算在排序时遇到重复的次数，然后根据升序或从下一个排序项目中添加或减去该数字或您正在排序的降序

于 2015-07-23T23:01:33.260 回答