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

Question

我有一个以这种格式生成的数组，称为 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>""]

我正在使用这个数组来填充下拉框

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

但是，我使用的常规排序方法均无效。

通常我会这样做:

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和 this我猜没有成功，因为它们在 html 标签中？

不确定追加之前的排序如何工作，因为我生成它是这样的:

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

大多数时候，当您发现自己不得不查询 DOM 或 HTML 字符串以获取数据时，这就表明设计中存在问题。始终尝试在数据和演示文稿代码之间进行清晰的分离。

简单的例子: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]);
        });
    }
}();