Question

使用jQuery或直接Javascript，我正在寻找找到最左边div的最佳方法（或者通常是在任一轴上具有最小或最大位置的DOM元素）。

到目前为止，我有两个解决方案：

遍历我想要考虑的div对象，保存找到的最小左侧位置。
构建一个对象数组，并使用javascript的sort（）函数和一个比较函数，该函数查看left属性，然后选择第0个元素。

我知道解决方案1将是O（N），但我不确定sort（）函数的效率在大多数浏览器中是什么，或者是否存在完全不同的方法。

Answer 1

考虑一下：

您跟踪一个元素和一个位置，您可以访问每个元素一次
您跟踪所有元素，并且因为排序

所有

您认为最快的是什么？：）

Answer 2

可能不会比O（n）更好，你做的最好的纯粹排序是O（nlogn）。最快的方法是走DOM。我会调用getElementsByTagName（“div”）并迭代跟踪最左边的元素。

function findLeftMostDiv() {
    var leftest = { "left": 999999999999, elem: null };
    var divs = document.getElementsByTagName("div");

    for(i=0; i<divs.length; i++) {
        var div = divs[i];
        var curleft = findPos(div);
        if(curleft < leftest.left) {
            leftest.left = curleft;
            leftest.elem = div;      
        } 
    } 
    return leftest.elem;               
}

function findPos(obj) {
    var curleft=0;
    if(obj.offsetParent) {
        do {
            curleft += obj.offsetLeft;
        } while (obj = obj.offsetParrent);
    }
    return curleft;
}

Answer 3

选项1：仅迭代一次

var $smallest = {left: 000000000, item: null};
var $left = 0;
$('selector').each(function(){
    $left = $(this).offset().left;
    if ($left < $smallest.left)
    {
        $smallest.left = $left;
        $smallest.item = this;
    }
});

选项2：至少迭代两次

var $array = [];
$('selector').each(function(){
    var $this = $(this);
    $array.push({left: $this.offset().left, item: this});
});
$array.sort(function(a,b){
    if (a.left < b.left) return -1;
    if (a.left > b.left) return 1;
    return 0;
});
// smallest is $array[0]

在这种情况下，

选项1总是更快，因为您只需在选择时对其进行排序，在这种情况下排序几乎是免费的。

编辑：当然，为此只使用DOM再次，速度更快。

找到最左边div的最有效方法？

3 个答案: