Question

我的以下代码可以正常排序所有select标记项。

$("select").html($("option").sort(function (a, b) {
     return a.text.toUpperCase() == b.text.toUpperCase() ? 0 : a.text.toUpperCase() < b.text.toUpperCase() ? -1 : 1
 }))

但我想分别对每个select项应用此排序。为此我使用“.each”循环，但它不与.sort一起使用。我正在使用.each如下：

$("select").html($("option").each(.sort(function (a, b) {
    return a.text.toUpperCase() == b.text.toUpperCase() ? 0 : a.text.toUpperCase() < b.text.toUpperCase() ? -1 : 1
 })))

请回答。

Answer 1

使用

$("select").each(function() {
    var $this = $(this);
    $this.html($("option", $this).sort(function (a, b) {
      return a.text.toUpperCase() == b.text.toUpperCase() ? 0 : a.text.toUpperCase() < b.text.toUpperCase() ? -1 : 1 
    }))
});

您的示例不起作用，因为您循环遍历每个选项而不是每个选择，并且排序不链接到任何内容。

Answer 2

您想在选择元素上调用.each，然后获取每个选择的子option元素，对它们进行排序并再次将它们分配给选择元素。

$("select").each(function(idx, el) {
  $(el).html( $(el).children("option").sort(your_sort) );
});

Answer 3

请勿更改<select>元素的HTML。只需重新排列现有的<option>元素。

function byTextCaseInsensitive(a, b) {
    var ta = a.text.toUpperCase(),
        tb = b.text.toUpperCase();
    return ta === tb ? 0 : ta < tb ? -1 : 1;
}

$("select").each(function () {
    $(this).find("option").sort(byTextCaseInsensitive).appendTo(this);
});

提示：在HTML DOM中追加现有节点将其从之前的位置移开。

Answer 4

你的.sort没有被束缚在任何东西上，它只是独自坐着。

Answer 5

语法关闭，each方法接受对所选元素集中的每个元素执行的函数。尝试使用函数包围排序代码并提供给each：

$("select").each(function(){
   $(this).html($(this).children("option").sort(function (a, b) {
         return a.text.toUpperCase() == b.text.toUpperCase() ? 0 : a.text.toUpperCase() < b.text.toUpperCase() ? -1 : 1
     }));    
});

JS小提琴： http://jsfiddle.net/MwDQz/

.each循环在html中与.sort一起使用

5 个答案: