jQuery 按属性对不同的 class 元素进行排序

Question

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

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

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

Answer 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;
};

Answer 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]);
                    }
                });

jQuery 按属性对不同的 class 元素进行排序

jQuery sort different class elements by attribute

html

javascript

css

jquery

custom-data-attribute