3

I've the following HTML schema

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

The user is able to add items to that list and all Divs should be in alphabetical order by the name in the h2. I've two options

1) i need to be able to insert a new item in between the 2 divs where the alphabetical order is correct

2) re organise the list entirely.

My approach was option 2, to sort the Divs in alphabetical order by the name in the h2

I came up with the following code to try to order it but this code creates a new List of ordered H2s without the divs. then I tried to do option 1) by using the same function but trying to insert into something like this (upA < upB) ? -1 : (NEW_ITEM_NAME> upB) ? 1 : 0 but that will cause a problem as that doesn't break the sort.

I was wondering 2 things, one is how could i break the sort as return 0 would not break it. or any help on how could i organise my list.

Thanks

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);
Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
Jonathan Thurft
  • 4,087
  • 7
  • 47
  • 78
  • Possibly duplicate: http://stackoverflow.com/questions/1134976/how-may-i-sort-a-list-alphabetically-using-jquery – speti43 Aug 15 '13 at 14:14
  • 1
    The provided code sorts a list... it doesn't sort a list contained within an element and out puts it properly. which is the issue here. – Jonathan Thurft Aug 15 '13 at 14:16

2 Answers2

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);
Ram
  • 143,282
  • 16
  • 168
  • 197
0

wanting to comment but have not met the "50 reputation" quota,

the Vohuman answer is problematic when introducing duplicates:

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

result:

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

see http://jsfiddle.net/std57rm4/

this only happens when a duplicate name or number you are sorting on is introduced

at this moment I don't have a solution, but it should be something along the lines of counting how many times a duplicate has been encountered when sorting and then adding or subtracting that number from the next sort item or items depending on the ascending or descending direction you are sorting in

gac123
  • 1
  • If you can figure out the solution to the duplicates problem, you should definitely edit your answer to include it. As your question stands right now, it risks being down-voted and potentially deleted for not answering the posted question. – Uyghur Lives Matter Jul 23 '15 at 23:10