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之前对其进行排序，然后添加它们;应该工作。

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

您还需要为数组元素使用单引号，因为您已经使用了属性的双引号，或者至少在属性中将其转义。

WORKING JSFIDDLE DEMO

Answer 2

大多数情况下，当您发现自己不得不在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]);
        });
    }
}();

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

我喜欢另一个答案，因为它没有删除HTML来进行比较，但你需要它们作为html元素才能工作。

Answer 4

或者你可以分离'option'元素，然后重新排序到'select'元素：

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

Demo (jsfiddle)

但在构建dom元素之前对原始数组进行排序更清晰：

// 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);
};

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

4 个答案: