jQuery sort different class elements by attribute

There is two arrays that display information appending elements to the document. They are being printed in ascending order, but when it comes to organize them all, I can’t organize them individually by data attribute.

This function does the sort but can’t mix different element classes:

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

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

JavaScript
​x
 
        $.fn.sortRaffles = function () {
          this
            .children()
            .sort((a, b) => $(a).data("order") - $(b).data("order") || -1)
            .appendTo(this);
​
          return this;
        }
        $(".lista ul").sortRaffles();
​

Before the above code this is where I print the two different element classes (avaibleRaffle and reservedRaffle) using arrays of string and filtering them to display the correct result.

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

JavaScript
 
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);
​

The a minimal reproducible example:

/* 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));

JavaScript
 
/* 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;
}

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

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

Since I couldn’t resolve this problem of printing in ascending order the numbers after validating it with sort. Besides the collaboration, I came with a solution that is only using forEach for comparison of arrays:

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

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

Advertisement

Answer