获取jQuery中的顶级元素

Question

我构建了高级验证插件，以特定方式显示错误。

但是，当用户输入无效时，我将页面滚动到验证失败的第一个元素。

这就是looks：

的方式

问题出在哪里？

我用TD's加粗黑色。

因此，您可以看到Currency textbox位于第一个TD上，Owner Name textbox位于第二个TD上

所以Currency textbox验证了第一个，因此，页面滚动到Currency位置而不是OwnerName文本框位置。 （按照我的意愿）

问题：

如何找到最顶层的元素（假设所有失败的元素都有.failed类 - 只是为了简单起见。）

Answer 1

只需遍历每个元素：

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);

注意：代码已更正为使用.offset代替.scrollTop

Answer 2

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;
    }    
});

Answer 3

试试这个：

var el;

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

Answer 4

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

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

Demo