排序與

Question

我已經在這個格式來產生一個數組的HTML標籤的數組稱爲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]); 
     }); 
    } 
}(); 

Answer 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

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

或者你可以分離「選項」的元素，做了排序，然後reappend到「選擇」的元素：

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