获取jQuery中的顶级元素

Question

I've built advanced validation plugin which shows the errors in a specific way.

However , when a user input is not valid , I scroll the page to the first element that has failed in validation.

this is how it looks :

So where is the problem ?

I've bolded the TD's in black.

So you can see that Currency textbox is on the first TD where Owner Name textbox is on the second TD

so Currency textbox has validated first , and so , the page scroll to the Currency location and not to the OwnerName text box location . ( as I wish)

Question :

How can I find the topmost element ( lets assume that all failed elements has .failed class - just for simplicity).

Answer 1

Just iterate through each of the elements:

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

Alternative, if you don't actually care which element it is, but just want the scroll position:

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

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

NB: code corrected to use .offset instead of .scrollTop

Answer 2

There is nothing in jQuery built in to give what you want. You would have to loop through all of the elements and use offset() to see which one has the smallest top and left.

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

Try this:

var el;

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

Answer 4

You could use sort to sort by position:

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

Demo