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

【问题标题】：Sorting an array with HTML tags使用 HTML 标签对数组进行排序
【发布时间】：2014-07-04 12:05:53
【问题描述】：

我正在以这种格式生成一个名为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);
     };

【问题讨论】：

在生成 HTML 数组之前不能排序吗？
sort是Array的方法，不是jQuery集合
这是按预期排序的，请参阅jsfiddle.net/9aXYc/42

标签： javascript jquery arrays sorting

【解决方案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]);
        });
    }
}();

【讨论】：

【解决方案2】：

您可以在将元素添加到 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

【讨论】：

除非我弄错了，你不需要 htmlelement 对象来获取 text 属性吗？问题将其显示为 html 字符串。
正确。当您在 $() 中包装一个有效的 HTML 字符串时，您可以像处理包装在其中的 DOM 元素一样操作它。请看演示。
哎呀，我错过了你的 $() 电话:)

【解决方案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 元素才能工作。

【讨论】：

【解决方案4】：

或者您可以分离“选项”元素，进行排序然后重新附加到“选择”元素：

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

【讨论】：