Html 基于<；p>；div'的内容；s childs[仅限PureJS]

如何使用纯javascript根据包装器中的子内容对div进行排序。

我有把小提琴：

如何通过单击包装器下的按钮，根据元素中的div对

.item

元素（紫色）进行排序

---

我用jQuery找到了解决方案，但我只寻找pureJS。

我基于您的JSFIDLE创建了一个示例。你可以找到这个例子

让我解释一下代码，以便您更好地理解它。 首先，使用Javascript设置每个按钮的CSS类：

var sortByYear = document.getElementsByClassName('sortbtn')[0];
var sortByName = document.getElementsByClassName('sortbtn')[1];
var sortByLname = document.getElementsByClassName('sortbtn')[2];
sortByYear.style.background = 'red';
sortByName.style.background = 'cyan';
sortByLname.style.background = 'yellow';

首先，我认为为了便于编码，如果给每个按钮起一个不同的名字会更容易。在这种情况下，更容易辨别单击了哪个按钮。在我的示例中，我为每个按钮添加了一个不同的类。然后使用jQuery，我可以如下设置

背景色

：

$('.sortyear').css('background-color','red');
$('.sortfirstname').css('background-color','orange');
$('.sortlastname').css('background-color','yellow');

对于排序部分，jQuery代码也非常简单。查看按年份对div进行排序的代码：

var $divs = $("div.item");

$('.sortyear').on('click', function () {        
    var sortbyyear = $divs.sort(function (a, b) {
        return $(a).find(".item-year").text() > $(b).find(".item-year").text();
    });
    $(".content").html(sortbyyear);
});

首先，需要一个变量来存储每个项目。然后检查是否单击了class:

.sortyear

的按钮，如果单击了该按钮，则在on click函数中创建一个函数

让我更详细地解释一下内部函数：

var sortbyyear = $divs.sort(function (a, b) {
    return $(a).find(".item-year").text() > $(b).find(".item-year").text();
});

在此函数中，我根据

.item year

对象中找到的值对所有

div.items

进行排序。然后我检查第一个

div.item

的值是否大于第二个

div.item

最后，在完成所有比较后，您必须将其附加到内容div。您可以使用设置排序项目的变量设置内容的HTML

sortbyyear

：

$(".content").html(sortbyyear);

---

就这样。请记住，我创建了三个函数（这看起来像一大堆代码，但我不想让它复杂化）。如果您还有任何问题，请告诉我您找到的jQuery解决方案是什么？您是否搜索了答案-这已经做了很多次了，就像这个mplungjan-我只写了PureJS。Darren Sweeney-我搜索过，大多数解决方案都是jQuery。为什么需要pureJS解决方案？jQuery让您的生活变得更加轻松。尤其是这样的事情。如果你想用纯javascript写这篇文章，你需要写一些代码。