Question

我有几十个DIV的列表，比如

<div data-sort="7.5"></div>
<div data-sort="3.2"></div>
<div data-sort="2.15"></div>
<div data-sort="-1.78"></div>
<div data-sort="-2.39"></div>

依此类推，我得到一个带有ajax请求的新DIV。我需要插入新的DIV，以便“data-sort”的顺序保持不变，按降序排列。

Answer 1

执行此插入（O(logN)）的最快算法是对新项目之间的值进行二进制搜索。假设列表已经先排序（如果没有自动完成，请在此处使用其中一个答案）：

/**+
 * Boilerplate to check first/last value
 */
var sortval = $new.data('sort');
var $first = $("div:first");
if (sortval >= $first.data('sort')) {
   $new.insertBefore($first);
    return;
}

var $last = $("div:last");
if (sortval <= $last.data('sort')) {
   $new.insertAfter($last);
    return;
}
/*-*/

//Fun stuff
var count = 0;
var $div = $("div");
do {
   var index = parseInt($div.length / 2)
   var $compare = $div.eq(index);
   var compare = $compare.data('sort');
   if (sortval === compare) {
      break;
   }
   else if (sortval < compare) {
      $div = $div.slice(index, $div.length);
   }
   else {
      $div = $div.slice(0, index);
   }
}
while ($div.length > 1);

if (sortval === compare || sortval > compare) { $new.insertBefore($compare); }
else { $new.insertAfter($compare); }

http://jsfiddle.net/ExplosionPIlls/SdjAy/1/

Answer 2

它不是那么优化，但我会在每次ajax请求完成时对div进行排序：

$("div").sort(function (prev, next) {
    return parseInt(next.dataset.sort) - parseInt(prev.dataset.sort);
}).appendTo("body");

如果花费太长时间，您只需循环显示div（通过.each？）并找到data-sort较小的第一个。

Answer 3

也许不优雅，但足够快......

在success处理程序中：

...
success: function(data) {
    $(data).each(function(){
        var $adiv = $(this);
        var sortval = parseFloat($adiv.data("sort"));
        var last = true;
        $("div").each(function(){
            if ($(this).data("sort") < sortval) {
                $(this).prepend($adiv);
                last = false;
                return false;
            }
        });
        if(last) {
            $("div").last().append($adiv);
        }
    });
}

jsFiddle

Answer 4

您也可以使用自定义逻辑。请试一试。

这是您的HTML

<div id="dvBase">
        <div data-sort="7.5">
        </div>
        <div data-sort="3.2">
        </div>
        <div data-sort="2.15">
        </div>
        <div data-sort="-1.78">
        </div>
        <div data-sort="-2.39">
        </div>
    </div>
    <div id="tempDiv">
    </div>

javascript代码

var divToAdd = "<div data-sort=\"1.5\"></div>";
        function getValue() {

            $("#tempDiv").html(divToAdd);
            var returnvalue = $("#tempDiv div").attr("data-sort");
            $("#tempDiv").empty();
            return returnvalue;
        }
        $(document).ready(function () {
            var valueToadd = parseFloat(getValue());
            var count = $("#dvBase >div[data-sort]").length;

            $("#dvBase >div[data-sort]").each(function (index, obj) {
                var value1 = parseFloat($(obj).attr("data-sort"));
                if (index < count - 1) {
                    var value2 = parseFloat($(obj).next().attr("data-sort"));

                    if ((value1 == valueToadd || (valueToadd < value1 && valueToadd >= value2)) && $("#dvBase >div[data-sort]").length === count) {
                        $(obj).after(divToAdd);
                    }
                } else {
                    if ($("#dvBase >div[data-sort]").length === count) {
                        $(obj).after(divToAdd);
                    }
                }
            });
        });

Answer 5

我在这里的答案帮助下解决了这个问题：

$("div").each(function(i){
    if(parseFloat($(this).data("weight"))<=weight){
        $(newDiv).insertBefore(this);
        return false;
    }
    else if (i == $(".post").length - 1) {
        $(newDiv).insertAfter(this);
        return false;
    }
});

这似乎工作正常且足够快......任何人都看到它的任何缺陷？

jQuery在div列表中的正确位置插入div

5 个答案: