獲取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中的頂級元素

回答

相關問題