Question

如何根据包含纯子javascript的子内容对包装内的div进行排序。

如何通过单击包装器下的按钮，根据其中的div对.item元素（紫色）进行排序。

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

Answer 1

我基于你的JSFIDDLE创建了一个例子。您可以找到此示例HERE。

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

background-color

首先，我认为如果为每个按钮指定一个不同的名称，编码目的会更容易。在这种情况下，更容易分散点击哪个按钮。在我的例子中，我为每个按钮添加了一个不同的类。然后使用jQuery我可以像这样设置$('.sortyear').css('background-color','red'); $('.sortfirstname').css('background-color','orange'); $('.sortlastname').css('background-color','yellow');：

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);
});

对于排序部分，jQuery代码也很容易。查看年份对div进行排序的代码：

.sortyear

首先需要一个变量来存储每个项目。我检查是否单击了类var sortbyyear = $divs.sort(function (a, b) { return $(a).find(".item-year").text() > $(b).find(".item-year").text(); });的按钮，如果单击它，那么我在点击功能中创建一个函数。

让我更详细地解释一下内部功能：

div.items

在此函数中，我根据.item-year对象中的值对所有div.item进行排序。然后我检查第一个div.item的值是否大于第二个sortbyyear的值

最后，当所有比较完成后，您必须将其附加到您的内容div。您可以使用设置已排序项目$(".content").html(sortbyyear);：

的变量来设置内容的HTML

public partial class GroupDetailView : TabbedPage
{
    public GroupDetailView (int id)
    {
        this.BindingContext = new GroupDetailViewModel (id);

        InitializeComponent ();
    }
}

那就是它。请记住，我创建了三个函数（这似乎是一大堆代码，但我不想让它复杂化）。如果您还有任何疑问，请告诉我

基于<p> div的孩子的内容对div进行排序[仅限PureJS]

1 个答案: