javascript - 获取jQuery中的顶部元素

Question

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

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

这是它的样子：

那么问题出在哪里？

我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];

演示