0

我有几十个 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，以便“数据排序”的顺序按降序保持不变。

4

5 回答 5

4

执行此插入 ( ) 的最快算法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/

于 2013-01-24T14:49:47.110 回答
2

它不是最理想的，但我只会在每次 ajax 请求完成时对 div 进行排序：

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

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

于 2013-01-24T06:53:19.800 回答
1

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

在您的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

于 2013-01-24T07:40:57.667 回答
0

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

这是您的 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);
                    }
                }
            });
        });
于 2013-01-24T07:35:01.853 回答
0

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

$("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;
    }
});

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

于 2013-01-24T17:31:49.930 回答