Question

我有一个选择元素，有多个项目。我应该在列表的开头放置以'_'开头的值，按字母顺序排序。我尝试使用unshift（）JavaScript方法，但它不起作用。还有其他办法吗？

HTML：

<select multiple="multiple">
<option>_c</option>
<option>b</option>
<option>_v</option>
<option>a</option>
</select>

脚本：

$(document).ready(function() {
var a = [];
$('option').each(function() {
    a.push($(this).text());
});
$('option').each(function() {
    var v = $(this).text();
    var s = v.substring(0,1);

    if (s == '_') {
        a.unshift($(this).text());
    }
});

a.sort();

for (i = 0; i < a.length; i++) {
  $('option').eq(i).text(a[i]);
}
});

它输出以下内容：

_c
_c
_v
_v

正如您所看到的，它会扰乱所有值，并且会丢失对没有“_”的值的引用。

Answer 1

按字母顺序说，下划线已经优先于其他字符，并且会使用常见的.sort()方法自动放在前面，这样可以为您提供正确的顺序：

＆＃13;

var a = [];
$('option').each(function() {
  a.push($(this).text());
});
a = a.sort();

for (i = 0; i < a.length; i++) {
  $('option').eq(i).text(a[i]);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select multiple="multiple">
  <option>_c</option>
  <option>b</option>
  <option>_v</option>
  <option>a</option>
</select>

＆＃13;

修改

如下所述，重新排序元素可能更好，而不仅仅是其中的值。此外，循环还有改进的余地。所以，这里有一个奇特的方法来解决你的问题：

OBS：JQuery＆＃39; .sort()尚未得到官方支持。

＆＃13;
＆＃13;
var select = $("select"); var opts = select.children("option"); select.append(opts.sort(function(a, b) { return $(a).text() > $(b).text(); }));
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <select multiple="multiple"> <option>_c</option> <option>b</option> <option>_v</option> <option>a</option> </select>
＆＃13;
＆＃13;
＆＃13;

Answer 2

查看示例http://jsfiddle.net/68t3x7hy/

var a = [];
$('option').each(function() {
    a.push($(this).text());
});

a.sort();
for (i = 0; i < a.length; i++) {
  $('option').eq(i).text(a[i]);
}

正如@Barmar所说，.sort为你做的工作！

Answer 3

基于此blog article的此插件，只要您的选项全部为小写：

jQuery.fn.mysort = function() {
    return this.pushStack( [].sort.apply( this, arguments ), []);
};

注意：虽然已经有$.fn.sort方法，但它不应该在库外使用。

$('option').mysort(function(a, b) {
    var sa = $(a).text();
    var sb = $(b).text();
    return (sa < sb) ? -1 : (sa > sb) ? 1 : 0;
}).appendTo('select');

这会提取option标记，按其内容对元素进行排序，然后只需将它们重新添加到新订单中的select元素。

请参阅http://jsfiddle.net/alnitak/L7ut14ok/

Answer 4

使用.map()。如前所述，在这种情况下，.sort()将为您完成所有工作。

＆＃13;

var a = $('option').map(function() {
  return this.outerHTML;
}).get().sort();

$('select').html(a.join(','))

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select multiple="multiple">
  <option>_c</option>
  <option>b</option>
  <option>_v</option>
  <option>a</option>
  <option>c</option>
  <option>_a</option>
</select>

＆＃13;

Answer 5

我认为这是一个干净的解决方案：

var $select = $('select');

$select.children().sort(function(a, b) {
    return a.innerHTML > b.innerHTML;
}).appendTo($select);

<强>更新

如果您不想使用$.fn.sort（因为它只应在内部使用），您可以执行以下操作：

$($select.children().get().sort(function(a, b) {
    return a.innerHTML > b.innerHTML;
})).appendTo($select);

jsfiddle-example

Answer 6

对于LcSalazar的更紧凑版本的答案：

var $o = $('option');
var a = $o.map(function() { return $(this).text() }).get().sort();
$o.text(function(n) { return a[n] } );

正如他的回答一样，这有一种潜在的不良行为，它会使元素保持原位，但会改变它们的文本值。

将项目放在数组的开头

6 个答案: