Sorting elements on page Alphabetically

user_15096327 0
Viewed 88

I am trying to sort the text content of divs on a page on button click.

JS Fiddle Link: https://jsfiddle.net/Jamescodes/4k7xonqv/188/

HTML

  <button id="myBtn">
    Sort Em!
  </button>

  <div class="red sortme">Steve</div>
  <div class="orange sortme">Dex</div>
  <div class="yellow sortme">Bob</div>
  <div style="color: green;" class="sortme">Colin</div>
  <div class="cyan sortme">James</div>
  <div class="blue sortme">Margie</div>
  <div class="purple sortme">Albert</div>

CSS

.red {
  color: red;
}

.orange {
  color: orange;
}

.yellow {
  color: yellow;
}

.cyan {
  color: cyan;
}

.blue {
  color: blue;
}

.purple {
  color: purple;
}

div.sortme {
  text-align: center;
  padding: 2px;
  max-width: 5rem;
  background-color: hsl(0, 0%, 0%, 0.85);
  border-radius: 5px;
}

button {
  margin: 5px;
  padding: 5px;
  border-radius: 5px;
}

JavaScript

function sortThem(s) {
  console.log('sorting');
  Array.prototype.slice.call(document.body.querySelectorAll(s)).sort(function sort(ea, eb) {
    var a = ea.textContent.trim();
    var b = eb.textContent.trim();
    console.log(a, b);
    if (a.textContent < b.textContent) return -1;
    if (a.textContent > b.textContent) return 1;
    return 0;
  }).forEach(function(div) {
    div.parentElement.appendChild(div);
  });
}
// call it like this
document.getElementById("myBtn").addEventListener("click", function() {
  sortThem('div.sortme')
});

the divs are not being sorted as i would expect them to be when i call the function on click. can someone help me understand why?

javascript
2 Answers

maybe it is safer to have it in a parent container like this, and simplify your code.

const sortThem = (parentId, selector) => {
  const parent = document.getElementById(parentId);
    const divs = [...parent.querySelectorAll(selector)];
  divs.forEach(div => div.remove());
  divs.sort((a, b) => (a.innerText > b.innerText) ? 1 : -1);
  divs.forEach(div => parent.append(div));
}

document.getElementById("myBtn").addEventListener("click", function() {
  sortThem('parent', 'div.sortme')
});
.red {
  color: red;
}

.orange {
  color: orange;
}

.yellow {
  color: yellow;
}

.cyan {
  color: cyan;
}

.blue {
  color: blue;
}

.purple {
  color: purple;
}

div.sortme {
  text-align: center;
  padding: 2px;
  max-width: 5rem;
  background-color: hsl(0, 0%, 0%, 0.85);
  border-radius: 5px;
}

button {
  margin: 5px;
  padding: 5px;
  border-radius: 5px;
}
 <button id="myBtn">
   Sort Em!
 </button>
 <div id="parent">
   <div class="red sortme">Steve</div>
   <div class="orange sortme">Dex</div>
   <div class="yellow sortme">Bob</div>
   <div style="color: green;" class="sortme">Colin</div>
   <div class="cyan sortme">James</div>
   <div class="blue sortme">Margie</div>
   <div class="purple sortme">Albert</div>
 </div>

user_38088260

In the sort function, you should be comparing a and b instead of comparing a.textContent and b.textContent

    function sortThem(s) {
      console.log('sorting');
    Array.prototype.slice.call(document.body.querySelectorAll(s)).sort(function sort (ea, eb) {
      var a = ea.textContent.trim();
      var b = eb.textContent.trim();
     
        if (a < b) return -1;
        if (a > b ) return 1;
        return 0;
    }).forEach(function(div) {
        div.parentElement.appendChild(div);
    });
}
// call it like this
  document.getElementById("myBtn").addEventListener("click", function(){
    sortThem('div.sortme')
  });
red {
 color: red; 
}
.orange {
 color: orange; 
}
.yellow {
 color: yellow; 
}
.cyan {
 color: cyan; 
}
.blue {
 color: blue; 
}
.purple {
 color: purple; 
}
div.sortme {
  text-align: center;
  padding: 2px;
  max-width: 5rem;
  background-color: hsl(0, 0%, 0%, 0.85);
  border-radius: 5px;
}
button {
  margin: 5px;
  padding: 5px;
  border-radius: 5px;
}
  <button id="myBtn">
    Sort Em!
  </button>

    <div class="red sortme">Steve</div>
    <div class="orange sortme">Dex</div>
    <div class="yellow sortme">Bob</div>
    <div style="color: green;" class="sortme">Colin</div>
    <div class="cyan sortme">James</div>
    <div class="blue sortme">Margie</div>
    <div class="purple sortme">Albert</div>

user_41593180
Related