Сортировка дочерних элементов на основе тега h2

Question

У меня есть пример страницы, содержащей несколько категорий. Каждая категория заключена в класс .items, который содержит тег заголовка h2 и несколько ссылок. Моя цель - отсортировать каждую из этих категорий в алфавитном порядке по тегу h2.

Я нашел несколько примеров, как это сделать, но они были в jquery. Я хочу сделать это только в JavaScript. Я нашел код, который будет сортировать div, но не по тегу h2 div.

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);
  });
}

Как изменить код javascipt для сортировки каждого .item по тегу h2?

Решение

С помощью других я понял это и хотел поделиться кодом. Я также отформатировал код, чтобы его было легко прочитать.

//****************************************
// 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

Изменить ea.textContent.trim() на ea.querySelector('h2').textContent.trim()

и

изменить eb.textContent.trim() на eb.querySelector('h2').textContent.trim()

В основном это будет означать проверку первого элемента каждого элемента div, а не элемента div.

Надеюсь, я вам помог!