如何使用jquery对具有本地字符的项目进行排序？

Question

我想按字母顺序对上面的div进行排序并使用以下代码:

$('#btnabc').click(function(){
  $('.item').sort(function(a, b) {
    if (a.textContent < b.textContent) {return -1;}
    else {return 1;}
  }).appendTo('#panelb');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='panelb'>
  <div class='item'>zaba</div>
  <div class='item'>žaba</div>
  <div class='item'>ciao</div>
  <div class='item'>?ao</div>
  <div class='item'>suma</div>
  <div class='item'>šuma</div>
</div>

它有效,但具有本地字符的项目未正确排序.基本上,在排序过程中我需要:

`ž` - to be considered as - `z`
`?` and `?` - to be considered as - `c`
`š` - to be considered as - `s`
`?` - to be considered as - `d`

有帮助吗？

Answer 1

四件事:

1. 您的代码始终返回-1或1.有时它应返回0,例如,当项目相同时.

2. 使用String#localeCompare得到一个语言环境敏感的比较.

3. 据官方统计,jQuery的不具有一个sort方法,因此使用它是一个坏主意(按照一般是使用无证的方法).请Array#sort改用.

4. textContent不是跨浏览器可靠的.既然你已经使用了jQuery,我会使用$(a).text()而不是a.textContent.

所以:

var items = $('.item').get();
items.sort(function(a, b) {
    return $(a).text().localeCompare($(b).text());
});
$('#panelb').append(items);

(这可以写成一个单独的陈述,但为了清楚起见,我使用了三个.)

例:

$('#btnabc').click(function(){
    var items = $('.item').get();
    items.sort(function(a, b) {
        return $(a).text().localeCompare($(b).text());
    });
    $('#panelb').append(items);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='panelb'>
<div class='item'>zaba</div>
<div class='item'>žaba</div>
<div class='item'>ciao</div>
<div class='item'>?ao</div>
<div class='item'>suma</div>
<div class='item'>šuma</div>
</div>
<input type="button" id="btnabc" value="Click me">