获取jQuery中的顶级元素

我已经构建了高级验证插件，以特定方式显示错误。获取jQuery中的顶级元素

然而，当用户输入无效，我滚动的页面已经失败验证第一元素。

这是它looks如何：

enter image description here

那么问题出在哪里？

我用黑色粗体显示了TD's。

所以你可以看到，Currency textbox是第一个TD其中Owner Name textbox是第二TD

所以Currency textbox已经验证第一，因此，页面滚动到货币的位置，而不是到OWNERNAME文本箱位置。（我希望）

问：

我如何才能找到最顶端的元素（让我们假设所有失败的因素有.failed类 - 只是为了简单）。

来源

2013-04-02 Royi Namir

通过每个元素只是重复：

var $failed = $('.failed'); 
var top = null; // current "smallest" value 
var found = null; // current "topmost" element 

$failed.each(function() { 
    var $this = $(this); 
    var cur = $this.offset().top; 
    if (top === null || cur < top) { 
     found = this; 
     top = cur; 
    } 
});

选择，如果你不真正关心它是元素，而只是希望滚动位置：

var tops = $failed.map(function() { 
    return $(this).offset().top; 
}).get(); 

var top = Math.min.apply(null, tops);

NB：代码更正为使用.offset代替.scrollTop

来源

2013-04-02 12:01:24 Alnitak

scrollTop当没有滚动时产生0？（我不能测试，我出） –

是啊，类似的东西 - 这就是为什么我改变了'.offset（）' – Alnitak

没有什么内置的jQuery给你想要的东西。您将不得不遍历所有元素并使用offset()来查看哪一个具有最小的顶部和左侧。

var failed = $(".failed"); 
var firstElem = failed.eq(0); 
var firstPos = firstElem.offset(); 
failed.splice(0,1); 
failed.each(function() { 
    var elem = $(this); 
    var pos = elem.offset(); 
    if (pos.top < firstPos.top || (pos.top===firstPos.top && pos.left<firstPos.left) { 
        firstElem = elem; 
        firstPos = pos; 
    }     
});

来源

2013-04-02 12:00:14 epascarello

ITYM'.offset（）'而不是'.POSITION（）' – Alnitak

哎呦，我没有我早晨的咖啡呢！固定。 – epascarello

试试这个：

var el; 

$.each($(".failed"), function() { 
    if (!el || el.offset().top > $(this).offset().top) { 
     el = $(this); 
    } 
});

来源

2013-04-02 12:01:59 97ldave

你可以使用sort按位置排序：

var topElement = $('.invalid-elements') 
    .sort(function(a, b) { return $(a).offset().top - $(b).offset().top })[0];

Demo

来源

2013-04-02 12:03:33

hmm，'sort'通常是O（n log n），这是'min'，它是O（n）... – Alnitak

@Alnitak：没错，我也赞成你的回答。与其他方法相比，我认为它在可读性方面有点整洁，但当然存在性能折衷。 OP希望能够了解将涉及的元素数量，并能够做出明智的决定。我认为这两种方法都应该放在那里，但是如果你对性能的影响也应该这样做:) –

获取jQuery中的顶级元素

回答

相关问题