Javascript: Ordenando elementos alfabeticamente com jQuery

Guto Xavier

·

Follow

Published in

gutoffline

·

1 min read

·

Aug 19, 2019

--

Share

CSS

body {
    background: #eee;
    font-family: sans-serif;
}.sortme{
    border: 14px solid #434343;
    padding: 80px;
    display: inline-block;
    margin: 20px;
    background-color: #ff7474;
    color: #434343;
    font-weight: bold;
}

HTML

<div class="wrap">
 <button id="alphBnt">Alphabetical</button>
  <div id="container">
   <div class='sortme' data-nome="CCC">
    OPAAAAA - C
   </div>
   <div class='sortme' data-nome="AAA">
    ENtão - A
   </div>
   <div class='sortme' data-nome="BBB">
    Testando B
   </div>
   <div class='sortme' data-nome="DDD">
    ERROU - D
   </div>
  </div>
 </div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.js" integrity="sha256-BTlTdQO9/fascB1drekrDVkaKd9PkwBymMlHOiG+qLI=" crossorigin="anonymous"></script>

Javascript

var $divs = $("div.box");$('#alphBnt').on('click', function () {
 $('.sortme').sort(function(a, b) {
  if (a.dataset.nome < b.dataset.nome) {
   return -1;
  } else {
   return 1;
  }
 }).appendTo('#container');
});$('#numBnt').on('click', function () {
 var numericallyOrderedDivs = $divs.sort(function (a, b) {
  return $(a).find("h2").text() > $(b).find("h2").text();
 });
 $("#container").html(numericallyOrderedDivs);
});