[jQuery sort divs - by DOM element name] #jQuery #javascript #sort_divs #html #css

sort_divs.css

body {
    background: #eee;
    font-family: sans-serif;
}
.box {
    background: red;
    height: 200px;
    width: 200px;
}
.box h1 {
    color: white;
    font-size: 3.5em;
    text-align: center;
}
.box h2 {
    color: black;
    font-size: 2.5em;
    text-align: center;
}

sort_divs.html

<div class="wrap">
    <button id="alphBnt">Alphabetical</button>
    <button id="numBnt">Numerical</button>
    <div id="container">
      <div class="box">
        <h1>B<h1>
        <h2>10.35</h2>  
      </div>
    
      <div class="box">
        <h1>A<h1>
        <h2>100.05</h2>
      </div>
    
      <div class="box">
        <h1>D<h1>
        <h2>200</h2>  
      </div>
    
      <div class="box">
        <h1>C<h1>
        <h2>5,510.25</h2>
      </div>
    </div>
  </div>

sort_divs.js

var $divs = $("div.box");

$('#alphBnt').on('click', function () {
    var alphabeticallyOrderedDivs = $divs.sort(function (a, b) {
        return $(a).find("h1").text() > $(b).find("h1").text();
    });
    $("#container").html(alphabeticallyOrderedDivs);
});

$('#numBnt').on('click', function () {
    var numericallyOrderedDivs = $divs.sort(function (a, b) {
        return $(a).find("h2").text() > $(b).find("h2").text();
    });
    $("#container").html(numericallyOrderedDivs);
});

sort_divs.md

Figure - sort divs alphabetically

Figure - sort divs numerically