Sorting Child Elements Based on 'h2' Tag

Question

I have an an example page containing several categories. Each category is wrapped in a .items class which contains an h2 title tag and several links. My goal is to sort each of those categories alphabetically based on the h2 tag.

I found several examples on how to do this, but they were in jquery. I want to do this only in javascript. I found some code that will sort divs but not by the divs's h2 tag.

HTML

<div id="mainContainer" class="column-container row">
  <div class="item column">
    <h2>Testimonials</h2>
    <a href="/examples/testimonials/testimonial-slider.phtml">Testimonial slider</a>
  </div>
  <div class="item column">
    <h2>Directories</h2>
     <a href="/examples/directories/staff-directory.phtml">Staff Directory</a>
  </div>
  <div class="item column">
    <h2>FAQ</h2>
  </div>
  <div class="item column">
    <h2>Forms</h2>
      <a href="/examples/forms/simple-contact-form.phtml">Simple contact form - WIP</a>
      <a href="/examples/forms/online-payment-form-networkmerchants.phtml">Online payment form using Network Merchants - WIP</a>
      <a href="/examples/forms/form-with-attachment.phtml">Form with attachment</a>
  </div>
</div>

JavaScript

sortCategory('#mainContainer');
function sortCategory(s) {
  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);
  });
}

How can I modify the javascipt code to sort each .item by the h2 tag?

Solution

With the help of others I figured it out and wanted to share the code. I also formatted the code to be easily read.

//****************************************
// Sort Categories Alphabetically
//****************************************

function sortCategory(elementContainer)
{
  var allElements = document.body.querySelectorAll(elementContainer);
  Array.prototype.slice.call(allElements).sort(byAlphabet).forEach(function(div)
  {
    div.parentElement.appendChild(div);
  });
}

function byAlphabet(first, second)
{
  var order = 0;
  var first = first.querySelector('h2').textContent.trim();
  var second = second.querySelector('h2').textContent.trim();

  first > second ? order = 1 : order = -1;

  return order;
}

//Call sortCategory function and pass in the container you want sorted
sortCategory('#mainContainer>.item');

Answer 1

Change ea.textContent.trim() to ea.querySelector('h2').textContent.trim()

and

change eb.textContent.trim() to eb.querySelector('h2').textContent.trim()

This will basically say check each div's first H2 element, rather than the div.

Hope I was helpful!