Question 22250 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Sorting ul li based on value of button inside li – Jquery

I have the following html li which contains list of usernames which are defined as
available or not available , how can I sort the list so that if the <button> inside <li> has the text “Available” moves to the top of the list and “Not Available” moves to the bottom of the list?

<ul class="list-group" id="prefixed-list">
  <li class="list-group-item active" aria-current="true">Prefixed List</li>

  <li class="list-group-item">mydavid
    <button type="button" class="btn btn-danger float-end" aria-expanded="false">Not Available</button>
    <br>
    <br>
    <div class="collapse">
      Other text
    </div>
  </li>

  <li class="list-group-item">jamesdave3
    <button type="button" class="btn btn-danger float-end" aria-expanded="false">Not Available</button>
    <br>
    <br>
    <div class="collapse">
      Other text
    </div>
  </li>

  <li class="list-group-item">imdavid39494
    <button type="button" class="btn btn-success float-end" aria-expanded="false">Available</button>
    <br>
    <br>
    <div class="collapse">
      Other text
    </div>
  </li>

</ul>
Tags:

2

Answers


  1. 0

    The following snippet illustrates how you can sort the <li> elements in a given <ul> with a custom sort function. In this example, the contents of the list items are compared as numbers, but you can adapt the function to suit your needs:

    • The "Prefixed List" comes before any other.
    • A list item where the button contains "Available" comes before one where the button contains "Not Available".
    • And so on.

    The sorted items are then added in the right sequence as children of <ul>. There is no need to remove them first, because adding an element automatically removes it from its former position in the document tree.

    var list = document.querySelector("ul");
var items = [...list.querySelectorAll("li")].sort(function(a, b) {
  var numberA = Number(a.textContent);
  var numberB = Number(b.textContent);
  if (numberA < numberB) return -1; // -1 means a before b
  if (numberA > numberB) return 1;  //  1 means b before a
  return 0;                         //  0 means a equals b
});
for (var item of items) list.appendChild(item);
    <ul>
  <li>2</li>
  <li>3</li>
  <li>1</li>
</ul>
    Login or Signup to reply.
  2. 0

    You can use .filter() to select those li elements that have a button with a text that has "Not", and re-append them to the ul container element. That way they actually move to the bottom of the list:

    $("#prefixed-list").children().filter(function () {
    return $("button", this).text().includes("Not")
}).appendTo("#prefixed-list");
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul class="list-group" id="prefixed-list">
  <li class="list-group-item active" aria-current="true">Prefixed List</li>

  <li class="list-group-item">mydavid
    <button type="button" class="btn btn-danger float-end" aria-expanded="false">Not Available</button>
    <br>
    <br>
    <div class="collapse">
      Other text
    </div>
  </li>

  <li class="list-group-item">jamesdave3
    <button type="button" class="btn btn-danger float-end" aria-expanded="false">Not Available</button>
    <br>
    <br>
    <div class="collapse">
      Other text
    </div>
  </li>

  <li class="list-group-item">imdavid39494
    <button type="button" class="btn btn-success float-end" aria-expanded="false">Available</button>
    <br>
    <br>
    <div class="collapse">
      Other text
    </div>
  </li>

</ul>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search