什么'；这个Javascript多字段排序有什么问题？

这是我的代码：

<div class="item" data-count="1" data-title="C">1 C</div>
<div class="item" data-count="2" data-title="D">2 D</div>
<div class="item" data-count="2" data-title="A">2 A</div>
<div class="item" data-count="1" data-title="Z">1 Z</div>

$('.item').sort(function (x, y) {
    var n = $(x).attr("data-count") - $(y).attr("data-count");
    if (n != 0) {
        return n;
    }

    return $(x).attr("data-title") - $(y).attr("data-title");
});

而是：

1 C
2 D
2 A
1 Z

---

这个排序函数哪里错了？

我们可以解决三个主要问题：

• 要比较计数，我们应该使用

  parseInt

  来比较int而不是字符串
• 要比较字符串，我们应该使用

  localeCompare

  获得0、1或-1，而不是减去字符串
• 在对元素数组进行排序之后，我们需要用排序后的元素替换现有的元素

下面是一个演示如何执行上述操作的示例

function parse(node) {
    return {
        // Parse integer from attribute
        count: parseInt($(node).attr("data-count"), 10),
        title: $(node).attr("data-title")
    };
}

var items = $('.item').toArray().sort(function (x, y) {
    var xData = parse(x);
    var yData = parse(y);
    if (xData.count !== yData.count) {
        return xData.count - yData.count;
    }

    // Compare strings
    return xData.title.localeCompare(yData.title);
});

// Replace existing children with sorted children
$('.container').empty();
$('.container').append(items);

---

尝试使用此排序函数。它对我有用

Html

---

看看我的例子

在jQuery对象上运行

.sort（）

，实际上并不会在DOM中移动元素，它只是在jQuery对象中对元素重新排序。在这种情况下，您的第一个问题不是问题。

-

运算符将其操作数转换为数字。

+

可以执行加法或级联，但是，

-

只能执行减法运算，其操作数会自动转换为数字。

function parse(node) {
    return {
        // Parse integer from attribute
        count: parseInt($(node).attr("data-count"), 10),
        title: $(node).attr("data-title")
    };
}

var items = $('.item').toArray().sort(function (x, y) {
    var xData = parse(x);
    var yData = parse(y);
    if (xData.count !== yData.count) {
        return xData.count - yData.count;
    }

    // Compare strings
    return xData.title.localeCompare(yData.title);
});

// Replace existing children with sorted children
$('.container').empty();
$('.container').append(items);

<div class="testWrapper">
    <div class="item" data-count="1" data-title="C">1 C</div>
    <div class="item" data-count="2" data-title="D">2 D</div>
    <div class="item" data-count="2" data-title="A">2 A</div>
    <div class="item" data-count="1" data-title="Z">1 Z</div>
</div>

var $wrapper = $('.testWrapper');

$wrapper.find('.item').sort(function (a, b) {
    return +b.getAttribute('data-count') - +a.getAttribute('data-count') ||  a.getAttribute('data-title') > b.getAttribute('data-title');
})
.appendTo( $wrapper );