javascript - JQuery.sort 按数据选项和类

Question

我遇到了 javascript 排序函数的问题。以下函数按 data-price 属性降序对包装器中的项目进行排序。

HTML 部分:

<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>

JQuery 部分:

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

现在我想更改为按数据价格和.blacklisted 排序的 JQuery 部分

当前响应

<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>

Answer 1

首先请注意，HTML 中的div 元素有两个无效的class 属性。您需要将它们合二为一。

要实现您的要求，您可以检查元素是否具有 blacklisted 类，然后适本地向上/向下移动它们。如果两者都没有类别，您可以像现在一样按 data-price 对它们进行排序。试试这个:

var $wrapper = $('.wrapper');
$wrapper.find('.item').sort(function(a, b) {
  if ($(a).hasClass('blacklisted') && !$(b).hasClass('blacklisted'))
    return 1;

  if ($(b).hasClass('blacklisted') && !$(a).hasClass('blacklisted'))
    return -1;

  return -a.getAttribute('data-price') - -b.getAttribute('data-price');
}).appendTo($wrapper);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="item" data-price="1">1</div>
  <div class="item blacklisted" data-price="2">2b</div>
  <div class="item" data-price="3">3</div>
  <div class="item blacklisted" data-price="4">4b</div>
</div>