Question

这是我的HTML。有一些选择。每个元素都有元素p：date和name。我需要通过p“date”按日期对这些div进行排序。忽略名称为

的p

<div id="divs">
    <div class="option">
        <small class="text-muted"><i class="fa fa-clock-o date"></i>12.10.2018 12:05</small>
        <p class="name">Jones</p>
    </div>
    <div class="option">
        <small class="text-muted"><i class="fa fa-clock-o date"></i>12.11.2015 02:25</small>
        <p class="name">Micheal</p>
    </div>
    <div class="option">
        <small class="text-muted"><i class="fa fa-clock-o date"></i>02.11.2020 21:50</small>
        <p class="name">Micheal</p>
    </div>
</div>

如何在“日期”类中按日期对div进行排序。我试过这个剧本

var listitems = document.querySelectorAll('#option > date');

listitems.sort(function(a, b) {
   return    $(b).text().toUpperCase().localeCompare($(a).text().toUpperCase());
});

$.each(listitems, function(index, item) {
   mylist.append(item); 
});

Answer 1

由于您使用的是jQuery，因此相对容易。

创建一个表示每个<small>的{{1}}标记的数组的jQuery对象。您的原始.option选择器在您的html中没有标记。实际日期在date标记内。
使用自定义比较功能调用此阵列上的<small>函数。这会按升序排序，要将其更改为降序，请将sort符号切换为>。
只需打印出值。

// Detach the DOM elements
var listitems = $('#divs').detach('.option'); 
var children = listitems.children();

// Sort directly with the DOM elements
children.sort(function(a, b) {
  return new Date($(a).children().first().text() > $(b).children().first().text());
});

// Remove 'old' DOM elements
listitems.empty();
// Append 'new' DOM elements
listitems.append(children);
// Append list back to <body>
$('body').append(listitems);

只是澄清一下，使用<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="divs"> <div class="option"> <small class="text-muted"><i class="fa fa-clock-o date"></i>12.10.2018 12:05</small> <p class="name">Jones</p> </div> <div class="option"> <small class="text-muted"><i class="fa fa-clock-o date"></i>12.11.2015 02:25</small> <p class="name">Micheal</p> </div> <div class="option"> <small class="text-muted"><i class="fa fa-clock-o date"></i>02.11.2020 21:50</small> <p class="name">Micheal</p> </div> </div>选择器选择一个类和.class选择器来选择ID，并在选择标签时使用#id选择器。

您试图选择tag，但#option是您的HTML中的一个类。此外，您试图选择option ID中的所有date代码。您的html中没有#option个标签。实际日期只是<date>标记内的文字。 <small>

详细了解选择器here。

我强烈建议您阅读有关DOM here的更多信息。

按日期排序div

1 个答案: