How to sort jQuery array containing HTML based on text in an element with a certain class

Question

I've got an array that contains HTML code that I need to append somewhere on my page. These are text messages and I'm trying to get them sorted by date.

I took a look at a few different posts which described using jQuery.sort(), I've tried to implement it here:

function sortHtmlArray(array) {
    array.sort((a, b) => a.find('.incoming-message-date') - b.find('.outgoing-message-date'));
}

But I'm clearly not doing it correct as it still sorts the same as below (out of order).

Where am I going wrong?

marc_s · Accepted Answer · 2023-01-21 09:36:38Z

Maybe this?

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <title>Document</title>
  </head>
  <body>
    <p>Not Ordered:</p>
    <div style="border: 1px solid black" class="not-ordered-msg-container"></div>
    <br />
    <p>Ordered:</p>
    <div style="border: 1px solid black" class="ordered-msg-container"></div>

    <script>
      const html = `
        <div class="col">
            <div class="incoming-message-date">2022-12-01 08:00</div>
            <div class="incoming-message-box">3º message (incoming)</div>
            <br/>
        </div><div class="col">
          <div class="incoming-message-date">2021-06-26 13:00</div>
          <div class="incoming-message-box">2º message (incoming)</div>
          <br/>
        </div><div class="col">
          <div class="incoming-message-date">2026-04-08 15:00</div>
          <div class="incoming-message-box">6º message (incoming)</div>
          <br/>
        </div><div class="col">
          <div class="incoming-message-date">2020-04-08 14:00</div>
          <div class="incoming-message-box">1º message (incoming)</div>
          <br/>
        </div><div class="col">
          <div class="incoming-message-date">2026-04-08 14:00</div>
          <div class="incoming-message-box">5º message (incoming)</div>
          <br/>
        </div><div class="col">
          <div class="outgoing-message-date">2023-12-01 08:00</div>
          <div class="incoming-message-box">4º message (outgoing)</div>
          <br/>
        </div>`;

      const notOrdered = $(html);
      notOrdered.appendTo($(".not-ordered-msg-container"));

      const ordered = $(html);
      ordered.sort(function (a, b) {
        const A = $(a).find(".outgoing-message-date, .incoming-message-date").text();
        const B = $(b).find(".outgoing-message-date, .incoming-message-date").text();

        return A.localeCompare(B);
      });
      $(ordered).appendTo($(".ordered-msg-container"));
    </script>
  </body>
</html>

Collectives™ on Stack Overflow

How to sort jQuery array containing HTML based on text in an element with a certain class

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related