时间戳

首页 > 解决方案 > 如果包含文本，jQuery 对多个 DIV 进行排序

javascript - 如果包含文本，jQuery 对多个 DIV 进行排序

问题描述

我有多个部分，我想在其中对DIVsif 包含<span>文本进行排序，否则。我尝试了不同的stackoverflow线程，但到目前为止对我没有任何帮助，我离目标有点近，但我的代码不起作用我不确定我做错了什么，这些内部 div 需要在每个部分中进行排序。但我不擅长JS。如果 div 包含跨度文本，它将在每个部分中将其放在首位。

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

标签： javascriptjqueryhtml

解决方案

首先请注意，您已经创建了多个具有相同idof 的元素toSort。这是无效的，因为在 DOM 中id 必须是唯一的。如果您想按常见行为对元素进行分组，请改用类。

我想在每个部分中将跨度放在首位

在这种情况下，您不需要排序。只是与他们小组的开始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>

推荐阅读