jQuery сортировка нескольких DIV, если содержит <span>текст

Question

У меня есть несколько разделов, в которых я хочу отсортировать DIVs, если в противном случае содержит <span> текст. Я пробовал разные stackoverflow потоки, но пока мне ничего не помогает, я немного близок к цели, но мой код не работает. Я не уверен, что я делаю неправильно, эти внутренние div должны быть отсортированы внутри каждого раздел. но я не очень хорош в JS. Если div содержит текст span, он выводится первым в каждом разделе.

sortUsingNestedText($('#toSort'), "div.customCardData", "span.recenUpdate");

function sortUsingNestedText(parent, childSelector, keySelector) {
  var items = parent.children(childSelector).sort(function(a, b) {
    var vA = $(keySelector, a).text();
    var vB = $(keySelector, b).text();
    return (vA < vB) ? -1 : (vA > vB) ? 1 : 0;
  });
  parent.append(items);
  console.log("done");
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row mbr-justify-content-center" id="toSort">
  <div class="col-lg-12 text-center sectionTitle">
    <h2>Section Title 01</h2>
  </div>
  <div class="col-lg-4 mbr-col-md-12 customCardData">
    <a href="#">
      <div class="wrap">
        <h3>Item A</h3>
      </div>
    </a>
  </div>
  <div class="col-lg-4 mbr-col-md-12 customCardData">
    <a href="#">
      <div class="wrap">
        <h3>Item B</h3>
      </div>
    </a>
  </div>
  <div class="col-lg-4 mbr-col-md-12 customCardData">
    <a href="#">
      <div class="wrap">
        <h3>Item C</h3>
        <div class="ribbon"><span class="recenUpdate">Updated Today</span></div>
      </div>
    </a>
  </div>
</div>
<div class="row mbr-justify-content-center" id="toSort">
  <div class="col-lg-12 text-center sectionTitle">
    <h2>Section Title 02</h2>
  </div>
  <div class="col-lg-4 mbr-col-md-12 customCardData">
    <a href="#">
      <div class="wrap">
        <h3>Item X</h3>
      </div>
    </a>
  </div>
  <div class="col-lg-4 mbr-col-md-12 customCardData">
    <a href="#">
      <div class="wrap">
        <h3>Item Y</h3>
      </div>
    </a>
  </div>
  <div class="col-lg-4 mbr-col-md-12 customCardData">
    <a href="#">
      <div class="wrap">
        <h3>Item Z</h3>
        <div class="ribbon"><span class="recenUpdate">Updated Today</span></div>
      </div>
    </a>
  </div>
</div>

Вот мой jsFiddle

Answer 1

Во-первых, обратите внимание, что вы создали несколько элементов с одинаковым id из toSort. Это недопустимо, поскольку id должно быть уникальным в DOM. Если вы хотите сгруппировать элементы по общему поведению, используйте вместо этого классы.

Я хочу, чтобы в каждом разделе были сплошные единицы по одному

В этом случае вам не нужно нужно сортировать. Просто append() соответствует div началу их группы:

$('.toSort').each(function() {
  var $h2 = $(this).find('h2');  
  $(this).find('.customCardData:has(span.recenUpdate)').insertAfter($h2);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row mbr-justify-content-center toSort">
  <div class="col-lg-12 text-center sectionTitle">
    <h2>Section Title 01</h2>
  </div>
  <div class="col-lg-4 mbr-col-md-12 customCardData">
    <a href="#">
      <div class="wrap">
        <h3>Item A</h3>
      </div>
    </a>
  </div>
  <div class="col-lg-4 mbr-col-md-12 customCardData">
    <a href="#">
      <div class="wrap">
        <h3>Item B</h3>
      </div>
    </a>
  </div>
  <div class="col-lg-4 mbr-col-md-12 customCardData">
    <a href="#">
      <div class="wrap">
        <h3>Item C</h3>
        <div class="ribbon"><span class="recenUpdate">Updated Today</span></div>
      </div>
    </a>
  </div>
</div>
<div class="row mbr-justify-content-center toSort">
  <div class="col-lg-12 text-center sectionTitle">
    <h2>Section Title 02</h2>
  </div>
  <div class="col-lg-4 mbr-col-md-12 customCardData">
    <a href="#">
      <div class="wrap">
        <h3>Item X</h3>
      </div>
    </a>
  </div>
  <div class="col-lg-4 mbr-col-md-12 customCardData">
    <a href="#">
      <div class="wrap">
        <h3>Item Y</h3>
      </div>
    </a>
  </div>
  <div class="col-lg-4 mbr-col-md-12 customCardData">
    <a href="#">
      <div class="wrap">
        <h3>Item Z</h3>
        <div class="ribbon"><span class="recenUpdate">Updated Today</span></div>
      </div>
    </a>
  </div>
</div>