如何選擇jQuery的第一個塊級別的父親？

Question

考慮下面的標記：

<div id="0"> 
    <h1 id="1"> 
     <span id="2"><span id="3">lorem ipsum</span></span> 
    </h1> 
</div> 

我如何才能找到的跨度＃3是塊級（即已經display: block）使用jQuery的第一個父？在這種情況下，這將是h1#1。

Answer 1

$("#3").parents().filter(function() { 
    return $(this).css("display") === "block"; 
}).first() 

http://jsfiddle.net/DFURw/

Answer 2

嗯。 。 。我認爲這是

 

$('#3').parents().each(function(){ 

    if ($(this).css('display') == 'block') { 
     console.log(this); 
     //do your stuff if the element is block 
     return false; // bail out 
    } 

}); 
 

Answer 3

該解決方案是最短的，並不會尋找任何超過必要的元素：

var $el = $('#3'); 
while ($el.css('display') !== 'block' && ($el = $el.parent().length)){} 

完成後，$ EL將是要麼是顯示父元素：塊，或者如果沒有，它將是一個沒有項目的jQuery元素。

Answer 4

According to W3C, a block level element can have a display of anything whose contents are processed like a table or a block。所以，沒有進一步的簡介，這是我的解決方案。我相信你會發現它比上述解決方案快得多。

var elementBlockDisplays={"run-in":1,"block":1,"table-row-group":1,"table-column":1,"table-column-group":1,"table-header-group":1,"table-footer-group":1,"table-row":1,"table-cell":1,"table-caption":1,"inline-block:":1}; 

var getBlockParent = function(theElement){ 
    var cur=theElement.parentElement; 
    while (cur&&!elementBlockDisplays[getComputedStyle(cur).display]) 
     cur=cur.parentElement; 
    return cur; 
};