jQuery按属性对不同的类元素进行排序答案

【问题标题】：jQuery sort different class elements by attributejQuery按属性对不同的类元素进行排序
【发布时间】：2021-04-28 00:50:11
【问题描述】：

有两个数组用于显示向文档附加元素的信息。它们是按升序打印的，但是在将它们全部组织起来时，我无法按数据属性单独组织它们。

此函数进行排序但不能混合不同的元素类：

        $.fn.sortRaffles = function () {
          this
            .children()
            .sort((a, b) => $(a).data("order") - $(b).data("order") || -1)
            .appendTo(this);

          return this;
        }
        $(".lista ul").sortRaffles();

在上面的代码之前，我使用字符串数组打印两个不同的元素类（avaibleRaffle 和 reservedRaffle）并过滤它们以显示正确的结果。

const nums = Array.from({ length: 11 }, (_, i) => `${i}`.padStart(3, "0"));

const customers = [
  { number: "002" },
  { number: "6003" },
  { number: "1010" },
  { number: "008,005,007,0002" }
];

const reserved_nums = nums.filter(
  (s) => !customers.some((o) => o.number.includes(s))
);

const avaible_nums = nums.filter((s) =>
  customers.some((o) => o.number.includes(s))
);

var avaibleRaffle = $();
$.each(avaible_nums, function (index, value) {
  avaibleRaffle = avaibleRaffle.add(
    '<span class="btn btn-success btn_reservas data-order="' +
      value +
      '" >' +
      value +
      "</span>"
  );
});
$(".lista ul li").append(avaibleRaffle);

var reservedRaffle = $();
$.each(reserved_nums, function (index, value) {
  reservedRaffle = reservedRaffle.add(
    '<span class="btn btn-warning btn_pagos data-order="' +
      value +
      '" >' +
      value +
      "</span>"
  );
});
$(".lista ul li").append(reservedRaffle);

一个最小可重现的例子：

/* eslint-env jquery */

const nums = Array.from({ length: 11 }, (_, i) => `${i}`.padStart(3, "0"));

const customers = [
  { number: "002" },
  { number: "6003" },
  { number: "1010" },
  { number: "008,005,007,0002" }
];

const reserved_nums = nums.filter(
  (s) => !customers.some((o) => o.number.includes(s))
);

const avaible_nums = nums.filter((s) =>
  customers.some((o) => o.number.includes(s))
);

var avaibleRaffle = $();
$.each(avaible_nums, function (index, value) {
  avaibleRaffle = avaibleRaffle.add(
    '<span class="btn btn-success btn_reservas data-order="' +
      value +
      '" >' +
      value +
      "</span>"
  );
});
$(".lista ul li").append(avaibleRaffle);

var reservedRaffle = $();
$.each(reserved_nums, function (index, value) {
  reservedRaffle = reservedRaffle.add(
    '<span class="btn btn-warning btn_pagos data-order="' +
      value +
      '" >' +
      value +
      "</span>"
  );
});
$(".lista ul li").append(reservedRaffle);

$.fn.sortRaffles = function () {
  this.children()
    .sort((a, b) => $(a).data("order") - $(b).data("order") || -1)
    .appendTo(this);

  return this;
};
$(".lista ul li span").sortRaffles();

console.log("Desired Order:", JSON.stringify(nums));
console.log("Avaible:", JSON.stringify(avaible_nums));
console.log("Reserved:", JSON.stringify(reserved_nums));

.lista ul li {
  display: inline;
}

.lista ul li span {
  border-radius: 50%;
  width: 100%;
  max-width: 40px;
  height: auto;
  margin: 3px;
  padding: 6px;
}

<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
    <link
      type="text/css"
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.1/semantic.css"
    />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
      integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l"
      crossorigin="anonymous"
    />

    <link type="text/css" rel="stylesheet" href="src/styles.css" />
  </head>

  <body>
    <div class="lista">
      <ul>
        <li>
          <span></span>
        </li>
      </ul>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="src/index.js"></script>
  </body>
</html>

【问题讨论】：

请在问题本身中添加minimal reproducible example（示例输入、预期输出、生成输出的规则）。
为什么是一个空的 jQuery 对象 (var avaibleRaffle = $();) 而不是一个简单的数组？
@Andreas 我更新了帖子以制作更简洁的代码。使用此 var 创建一个将接收特定数组并使用它来打印元素的变量，我应该只使用数组吗？此解决方案应进一步打印除数字之外的更多信息（如名称）

标签： javascript html jquery css custom-data-attribute

【解决方案1】：

您应该做两件事来让您的代码正常工作。 1-修复html。您在这两行中都错过了"：

'<span class="btn btn-success btn_reservas**"** data-order="' +

没有它，浏览器将无法读取data-order 属性。

2- 您的排序功能看起来几乎没问题，但要使其正常工作，请执行以下操作：

$.fn.sortRaffles = function () {
    var ordered = $(this).sort(function(a,b){
        return parseInt(a.dataset.order,10) > parseInt(b.dataset.order, 10);
    });
    $(".lista ul li").html(ordered);
    return this;
};

【讨论】：

谢谢，刚刚修复了示例 html，但是这个函数出现了“缺少基数参数”的问题。我检查了它是否可以仅与字符串一起使用，但看起来 a.dataset.order 不足以使用 parseInt。你知道我错过了什么吗？
使用任何基数都可以解决这个问题。我用 10 作为基数更新了答案。
它修复了，不幸的是元素仍然被打印在一边，一个类然后另一个，但不是都根据数据顺序属性。

【解决方案2】：

由于我无法解决在使用排序验证后按升序打印数字的问题。除了协作之外，我还提供了一个仅使用 forEach 比较数组的解决方案：

                nums.forEach(function (value) {
                    if (avaibleNumbers.indexOf(value) != -1) {
                        var av = avaibleNumbers.indexOf(value);
                        console.log(avaibleNumbers[av]);
                    }
                    else if (reservedNumbers.indexOf(value) != -1) {
                        var rs = reservedNumbers.indexOf(value);
                        console.log(reservedNumbers[rs]);
                    }
                });

【讨论】：