Javascript JQuery.sort by data选项和类

我对javascript排序函数有问题。 下面的函数按数据价格属性降序对包装中的项目进行排序

HTML部分：

现在我想切换到JQuery部分，它根据数据价格和.blacklist进行排序

电流响应

希望的答复：

首先请注意，HTML中的div元素有两个类属性，这是无效的。你需要加入他们的行列

为了达到您的要求，您可以检查元素是否具有黑名单类，然后适当地上下移动它们。如果两者都没有类，那么可以按照数据价格对它们进行排序，就像现在一样。试试这个：

var$wrapper=$'.wrapper'； $wrapper.find'.item'.sortfunctiona，b{ 如果$a.hasClass被列入“黑名单”&&！$b.hasClass被列入“黑名单” 返回1； 如果$b.hasClass被列入“黑名单”&&！$a.hasClass被列入“黑名单” 返回-1； return-a.getAttribute'data-price'-b.getAttribute'data-price'； }。附加至$wrapper； 1. 2b 3. 4b 首先请注意，HTML中的div元素有两个类属性，这是无效的。你需要加入他们的行列

为了达到您的要求，您可以检查元素是否具有黑名单类，然后适当地上下移动它们。如果两者都没有类，那么可以按照数据价格对它们进行排序，就像现在一样。试试这个：

var$wrapper=$'.wrapper'； $wrapper.find'.item'.sortfunctiona，b{ 如果$a.hasClass被列入“黑名单”&&！$b.hasClass被列入“黑名单” 返回1； 如果$b.hasClass被列入“黑名单”&&！$a.hasClass被列入“黑名单” 返回-1； return-a.getAttribute'data-price'-b.getAttribute'data-price'； }。附加至$wrapper； 1. 2b 3. 4b

---

一个元素不应该有两个类属性。您可以将.filter.blacklisted链接到，然后调用.appendTo

var$wrapper=$'.wrapper'； $wrapper.find'.item'.sortfunctiona，b{ return+a.getAttribute'data-price'>+b.getAttribute'data-price'？-1:1； } .appendTo$wrapper .filter.黑名单 。附加至$wrapper； 价格 黑名单 价格 黑名单

---

一个元素不应该有两个类属性。您可以将.filter.blacklisted链接到，然后调用.appendTo

var$wrapper=$'.wrapper'； $wrapper.find'.item'.sortfunctiona，b{ return+a.getAttribute'data-price'>+b.getAttribute'data-price'？-1:1； } .appendTo$wrapper .filter.黑名单 。附加至$wrapper； 价格 黑名单 价格 黑名单

---

为什么元素不应该有两个类属性？JavaScript如何知道哪个属性是适用的？如果一个元素可以有两个类属性，为什么元素不应该有两个id属性？但是您可以告诉我上面的答案和您的答案之间的区别在哪里？在初始排序后使用.filter。两种方法都应该返回相同的ResultToKay，谢谢，但在您的解决方案中，数据价格没有正确排序。为什么不应该有一个元素两个类属性？JavaScript如何知道哪个属性适用？如果一个元素可以有两个类属性，为什么元素不应该有两个id属性？但是您可以告诉我上面的答案和您的答案之间的区别在哪里？在初始排序后使用.filter。任何一种方法都应该返回相同的结果，谢谢，但在您的解决方案中，数据价格没有正确排序。对于所有正在寻找一个好的过滤器解决方案的人，请查看此！对于每一个正在寻找一个好的过滤器解决方案的人来说，看看这个！

<div class="wrapper">
    <div class="item" data-price="1"></div>
    <div class="item" data-price="2"class="blacklisted"></div>
    <div class="item" data-price="3"></div>
    <div class="item" data-price="4" class="blacklisted"></div>
</div>

    var $wrapper = $('.wrapper');
    $wrapper.find('.item').sort(function (a, b) {
        return -a.getAttribute('data-price') - -b.getAttribute('data-price');
    }).appendTo($wrapper);

<div class="wrapper">
    <div class="item" data-price="4" class="blacklisted"></div>
    <div class="item" data-price="3"></div>
    <div class="item" data-price="2"class="blacklisted"></div>
    <div class="item" data-price="1"></div>
</div>

<div class="wrapper">
    <div class="item" data-price="3"></div>
    <div class="item" data-price="1"></div>
    <div class="item" data-price="4" class="blacklisted"></div>
    <div class="item" data-price="2" class="blacklisted"></div>
</div>