How to sort printed results based on specific text of child divs using jquery?

Question

I have a list of printed results (divs). Each one contains a child div with text "CLOSE" or "OPEN" what i want is to sort the results so the divs which contain the word "OPEN" be always at the top of the list. How can i do that using jquery ?

<div class="box"><div class="status">CLOSE</div></div>
<div class="box"><div class="status">CLOSE</div></div>
<div class="box"><div class="status">OPEN</div></div>

JSFIDDLE

i think this isn't a duplicate question of THIS because in my fiddle i want to get the list sorted by specific text of a child element and not by attribute "data-sort". Thanks

Answer 1

So, you can wrap the elements in a containing div (or other element of your choice), and then use the native sort function in order to sort them. An example:

function sort() {
  // Get your root element
  var root = $("#toSort");
  // Get all your children as standard HTML nodes, and detach them from the DOM
  var elements = root.children(".box").detach();
  // Convert this from a JS object into an array
  var arr = Array.from(elements);
  // Sort your elements
  arr.sort(function(lhs, rhs) {
    var result = rhs.textContent === "OPEN" ? 1 : 0;
    result -= lhs.textContent === "OPEN" ? 1 : 0;
    // Sort works based on result being +ve/-ve/0
    return result;
  });
  // Re-add elements back into the DOM
  root.append(arr);
}

.box {width:85%;margin-bottom:4px;background:#ccc;padding:5px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="sort()">Sort elements</button>
<div id="toSort">
  <div class="box"><div class="status">CLOSE</div></div>
  <div class="box"><div class="status">CLOSE</div></div>
  <div class="box"><div class="status">OPEN</div></div>
  <div class="box"><div class="status">CLOSE</div></div>
  <div class="box"><div class="status">OPEN</div></div>
  <div class="box"><div class="status">CLOSE</div></div>
  <div class="box"><div class="status">OPEN</div></div>
</div>