使用HTML标签对数组进行排序

Question

I have an array being generated in this format called statecontent :

["<option value="Texas" data-code="TX">Texas - TX</option>", 
"<option value="Washington" data-code="WA">Washington - WA</option>", 
"<option value="Maryland" data-code="MD">Maryland - MD</option>""]

I'm using this array to populate a drop down box

var statecombo = $('#stateCombobox');    
statecombo.append(statecontent.join(''))

However none of the normal sorting methods I'm using are working.

Usually I would do:

var target = '#stateCombobox'
sortdropdown(target) 

 function sortdropdown(target) {
         $(target).html($(target + " option").sort(function (a, b) {
                 return a.text == b.text ? 0 : a.text < b.text ? -1 : 1;
         }));
 }

This doesnt work though, any idea how I could sort with this kind of format?

Tried this and this with no success I guess because they are in html tags?

Not sure how sorting before appending would work, as i generate it like:

for (var j = 0; j < obj[k].countries[i].states.length; j++) {                                                     
             var item = '<option value="' + obj[k].countries[i].states[j].state + '" data-code="' + Scode + '">' + obj[k].countries[i].states[j].state;
             item = item + '</option>';
             statecontent.push(item);
     };

Answer 1

You can sort the elements before adding them to the DOM and then add them; that should work.

var statecontent = ['<option value="Texas" data-code="TX">Texas - TX</option>', 
'<option value="Washington" data-code="WA">Washington - WA</option>', 
'<option value="Maryland" data-code="MD">Maryland - MD</option>'];

statecontent.sort(function(a,b) {
    return $(a)[0].text == $(b)[0].text ? 0 : $(a)[0].text < $(b)[0].text ? -1 : 1;
});            

And you also need to use single quotes for your array elements as you are already using the double quotes for the attributes, or at least escape it in the attributes.

WORKING JSFIDDLE DEMO

Answer 2

Most of the time, when you find yourself having to query the DOM or HTML strings for data, it's a good indicator that there's something wrong in the design. Always try to have a clean seperation between data and your presentation's code.

Simple exemple: http://jsfiddle.net/43NED/2/

!function () {
    var states = [
        { name: "Texas", code: "TX" },
        { name: "Washington", code: "WA" },
        { name: "Maryland", code: "MD" }
    ];

    populateStates(sortBy(states, 'name'));


    function populateStates(states) {
        var optionsFrag = document.createDocumentFragment();

        states.forEach(function (state) {
            optionsFrag.appendChild(new Option(state.name, state.code));
        });

        $('#stateCombobox').append(optionsFrag);
    }

    function sortBy(states, key) {
        return states.sort(function (a, b) {
            return a[key] < b[key]? -1 : +(a[key] > b[key]);
        });
    }
}();

Answer 3

var tags = ['<option value="Texas" data-code="TX">Texas - TX</option>', 
'<option value="Washington" data-code="WA">Washington - WA</option>', 
'<option value="Maryland" data-code="MD">Maryland - MD</option>'];

var pattern = new RegExp("<[^>]*>", "g");

tags.sort(function (a, b) {
    return a.replace(pattern,"") > b.replace(pattern, "") ? 1 : -1 ;
});

var s = $('#s');
s.append(tags.join());

I like the other answer because it doesnt strip out HTML to compare, but you need them as html elements for that to work.

Answer 4

Or you can detach the 'option' elements, do the sort then reappend to the 'select' element:

$(target + ' option').detach().sort(function (a, b) {
    return a.text == b.text ? 0 : a.text < b.text ? -1 : 1;
}).appendTo(target);

Demo (jsfiddle)

but sorting the original array before building the dom elements is cleaner:

// sort states
var sortedStates = obj[k].countries[i].states.sort();

for (var j = 0; j < sortedStates.length; j++) {
    var item = '<option value="' + sortedStates[j].state 
                + '" data-code="' + Scode + '">' + sortedStates[j].state;
    item = item + '</option>';
    statecontent.push(item);
};