jQuery根据计数和日期/时间(时间戳)对div元素进行排序 [英] jQuery sorting of div elements based on count, and date/time (timestamp)

问题描述

我目前使用sort函数根据计数值对div元素进行排序.现在，它是这样进行的:(我不确定这是否是一种有效的方法.)

I currently use the sort function to sort my div elements based on the count value. Here's how it's being done now: (I'm not sure if it's an efficient method or not..)

$('#list .list_item').sort(sortDescending).appendTo('#list');

function sortDescending(a, b) {
  return $(a).find(".count").text() < $(b).find(".count").text() ? 1 : -1;
};

我正在考虑添加一个时间戳字段，并且不确定如何扩展它以支持该字段.

I'm thinking of adding a timestamp field and am unsure how I can extend it to support this.

我有一个div元素列表，它具有自己的计数和日期/时间/时间戳.这是html代码的样子:

I have a list of div elements with its own count and date/time/timestamp. Here's how the html code would look like:

<div id="list">
<div id="list_item_1" class="list_item">
  <div class="count">5</div>
  <div class="timestamp">1272217086</div>
  <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quis ipsum rutrum metus rhoncus feugiat non vel orci. Etiam sit amet nisi sit amet est convallis viverra</div>
</div>
<div id="list_item_2" class="list_item">
  <div class="count">5</div>
  <div class="timestamp">1272216786</div>
  <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quis ipsum rutrum metus rhoncus feugiat non vel orci. Etiam sit amet nisi sit amet est convallis viverra</div>
</div>
<div id="list_item_3" class="list_item">
  <div class="count">10</div>
  <div class="timestamp">1272299966</div>
  <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quis ipsum rutrum metus rhoncus feugiat non vel orci. Etiam sit amet nisi sit amet est convallis viverra</div>
</div>
</div>

我想按计数(递减)排序，然后按时间戳(递减-最新在顶部)进行排序.

I would like to sort by count (decreasing), followed by timestamp (decreasing - newest at the top).

任何帮助将不胜感激！谢谢:)

Any help is greatly appreciated! Thanks :)

推荐答案

仅排序比较器功能需要更改.我敢肯定，有插件可以做到这一点，您可能想看看它们，但是实现您想要的是相当琐碎的. sortDescending方法每次都会获取两个div，并且比较必须遵循您指定的条件:

Only the sort comparator function needs to change. I'm sure there are plugins available to do this, and you might want to take a look at them, but implementing what you want is fairly trivial. The sortDescending method gets two divs each time, and comparison must follow the criteria you've specified:

1. 首先按计数
2. 如果计数相等，则按时间戳记
3. 如果时间戳记相等，则返回0

这是丑陋的，未经优化的版本:

Here's the ugly straightforward non-optimized version:

function sortDescending(a, b) {
    if(getCount(a) < getCount(b)) {
        return -1;
    }
    else if(getCount(a) > getCount(b)) {
        return 1;
    }
    else if(getTimestamp(a) < getTimestamp(b)) {
        return -1;
    }
    else if(getTimestamp(a) > getTimestamp(b) {
        return 1;
    }
    else {
        return 0;
    }
}

如果您看到if-else结构，则似乎可以将这种方法通用化，以便能够处理任何类型的自定义排序.因此，这是sortBy方法的戳记，它采用了许多回调函数，其中每个回调都定义了一个排序标准.

If you see the if-else structure, it may seem obvious that you can genericize this approach to be able to handle any type of custom ordering. So here's a jab at a sortBy method that takes in a number callback functions, where each callback defines one sorting criteria.

function sortBy() {
    var callbacks = arguments;

    return function(a, b) {
        for(var i = 0; i < callbacks; i++) {
            var value = callbacks[i](a, b);
            if(value != 0) {
                return value;
            }
        }
        return 0;
    };
}

然后将所有条件作为回调传递给此sortBy函数.这是您的代码的粗略示例:

Then pass all criteria's as callbacks to this sortBy function. Here's a rough example for your code:

function compareCount(a, b) {
    return getCount(a) - getCount(b);
}

function compareTimestamp(a, b) {
    return getTimestamp(a) - getTimestamp(b);
}

$("selector").sort(sortBy(compareCount, compareTimestamp));

在我们做的同时，我们还要用它制作一个jQuery插件.它将具有一个简单易用的界面:

And while we are at it, let's also make a jQuery plugin out of this. It will have a nice and easy interface:

$("parent selector").sortBy("child selector 1", "child selector 2", ...);

想法是传递一个jQuery选择器，该选择器将选择一个节点，该节点的文本将确定要作为排序依据的值.如果两个值都相同，我们将给予整数更高的优先级，并首先给 try 进行数字排序，否则进行常规比较.

The idea is to pass a jQuery selector that will select a node whose text will determine the value to sort by. We will give integers a higher priority and first try to sort numerically if both values are so, otherwise do a regular comparison.

jQuery.fn.sortBy = function() {  
    var selectors = arguments;

    this.sort(function(a, b) {
        // run through each selector, and return first non-zero match
        for(var i = 0; i < selectors.length; i++) {
            var selector = selectors[i];

            var first = $(selector, a).text();
            var second = $(selector, b).text();

            var isNumeric = Number(first) && Number(second);
            if(isNumeric) {
                var diff = first - second;
                if(diff != 0) {
                    return diff;
                }
            }
            else if(first != second) {
                return first < second ? -1 : 1;
            }
        }

        return 0;
    });

    this.appendTo(this.parent());

    return this;
};

用作

$('#list .list_item').sortBy('.count', '.timestmap');

在插件在此处中查看示例.

顺便说一句，这些都不会对文档本身中的元素进行排序.有关如何操作的信息，请参见此问题.

这篇关于jQuery根据计数和日期/时间(时间戳)对div元素进行排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！