Ordering a complex unordered list with javascript

Question

I am looking for a way to sort a fairly complicated html unordered list using either standard javascript or jQuery.

Please view the HTML, the order needs to be alphabetical and based on the HTML found inside the ".keywordType span value" but needs to construct the order of the top level li (with the unique keyword_xxx). I've just pasted 2 of the list items out of dozens.

<ul class="keywords">
    <li id="keyword_185">
        <div class="icon_keyword"></div>
        <input type="hidden" class="keywordLabel" value="More opening hours">
        <div class="data-wrapper">
            <div class="keywordType">
                <span class="oh">Payment methods</span>
            </div>
            <div class="keywordValue">
                <span id="keyword_185" class="oh">Credit Card, PayPal</span>
            </div>
        </div>
        <a class="edit" title="Edit keywords"></a>
        <a class="delete" title="Delete keywords"></a>
    </li>
    <li id="keyword_192">
        <div class="icon_keyword"></div>
        <input type="hidden" class="keywordLabel" value="Monday to Friday: 8:30am to 6:30pm Saturday: 9pm to 6:30pm Sunday: 10 - 4pm">
        <div class="data-wrapper">
            <div class="keywordType">
                <span class="oh">Opening Hours</span>
            </div>
            <div class="keywordValue">
                <span id="keyword_192" class="oh">Monday to Friday: 8:30am to 6:30pm<br>Saturday: 9pm to 6:30pm<br>Sunday: 10 - 4pm</span>
            </div>
        </div>
        <a class="edit" title="Edit keywords"></a>
        <a class="delete" title="Delete keywords"></a>
    </li>
</ul>

Thanks

This may be better suited for a serverside sort or a jquery table/grid. — wesbos
– wesbos, Commented Aug 18, 2011 at 13:47
Wes - I've little control over the HTML unfortunately! As it's doing a heck of a little before me taking over. Sorry if it wasn't clear James Hill, the expected result was to reorder the <li> elements using the selector ".keywordType span" html value TonioElGringo, thanks that's exactly what I was looking for. I'll also study the code to understand JS sorting better. — Chris
– Chris, Commented Aug 18, 2011 at 14:07
You're root problem here looks like overly complex html. I'd look into a better structure for that so that problems like this don't keep popping up. — Kzqai
– Kzqai, Commented Aug 18, 2011 at 14:14

katspaugh · Accepted Answer · 2012-09-02 16:23:05Z

4

var list = $('ul.keywords');
var listItems = $('li', list);

listItems.sort(function (a, b) {
    return $(a).text() > $(b).text() ? 1 : -1;
});

list.append(listItems);

You can sort the list of elements (jQuery objects have all the methods of Array, including Array.prototype.sort).

In the comparison function simply compare the text content of the list items. Individual letters will be subsequently compared according to their position in the alphabet (Unicode table, actually). For example, k > a is true.

Finally, just re-append the items to the list.

Demo: http://jsbin.com/igesic

edited Sep 2, 2012 at 16:23

answered Aug 18, 2011 at 14:05

katspaugh

18k12 gold badges69 silver badges107 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Chris Over a year ago

Thanks, very simple solution I don't need it to do anything beyond this :-)

ShankarSangoli · Accepted Answer · 2011-08-18 14:04:19Z

2

Take a look at this, it exactly matches your requirement.

http://james.padolsey.com/javascript/sorting-elements-with-jquery/

answered Aug 18, 2011 at 14:04

ShankarSangoli

69.9k13 gold badges96 silver badges124 bronze badges

Comments

chim · Accepted Answer · 2011-08-18 14:05:34Z

0

Does this help?

var arr;
$('.keyword span').each( function( i, el){
    arr[i] = $(el).text();
});
arr.sort();

I tested it on this question page, the code below orders the list of related questions in the right hand col.

var arr;
$('.question-hyperlink').each( function( i, el){
    arr[i] = $(el).text();
});
arr.sort();

answered Aug 18, 2011 at 14:05

chim

8,6133 gold badges55 silver badges61 bronze badges

Collectives™ on Stack Overflow

Ordering a complex unordered list with javascript

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related