.each循环不能与html中的.sort一起使用

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>元素的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);
});

提示：在HTMLDOM中追加现有节点会将其从以前的位置移动。

Answer 2

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

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

Answer 3

使用

$("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 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 Fiddle:http://jsfiddle.net/MwDQz/