基于“ h2”标签对子元素进行排序

时间:2019-05-31 17:03:26

标签: javascript sorting

我有一个包含几个类别的示例页面。每个类别都包装在.items类中,该类包含h2标题标签和几个链接。我的目标是根据h2标签按字母顺序对每个类别进行排序。

我找到了几个有关如何执行此操作的示例,但它们在jquery中。我只想在javascript中执行此操作。我找到了一些可以对div排序的代码,但不能对div的h2标签进行排序。

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代码以按h2标签对每个.item进行排序?

解决方案

在其他人的帮助下,我找到了答案,并希望共享代码。我还对代码进行了格式化以便于阅读。

//****************************************
// 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');

1 个答案:

答案 0 :(得分:2)

self.net_common = nn.Sequential ( nn.Linear(64*64, 48*48), nn.BatchNorm1d(48*48), nn.Tanh(), nn.Dropout(p=0.25), nn.Linear(48*48, 32*32), nn.BatchNorm1d(32*32), nn.Tanh(), ) 更改为ea.textContent.trim()

更改ea.querySelector('h2').textContent.trim()eb.textContent.trim()


这基本上是说检查每个div的第一个H2元素,而不是div。

希望我有帮助!