Jak wybrać rodzica pierwszego poziomu bloku z jQuery?

Question

Rozważmy następujący znacznik:

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

Jak mogę znaleźć pierwsze rodzica przęsła # 3, który jest z poziomu bloku (czyli ma display: block) przy użyciu jQuery? W tym przypadku będzie to h1#1.

Answer 1

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

http://jsfiddle.net/DFURw/

Answer 2

Hmm. . . Myślę, że byłoby

 

$('#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

Rozwiązanie to jest najkrótsza i nie będą szukać już więcej elementów niż konieczne:

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

Po zakończeniu $ el będzie albo elementu nadrzędnego, który jest display: block , lub jeśli nie ma żadnych, będzie to element jQuery bez elementów.

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. Tak więc, bez dalszego adieu, oto moje rozwiązanie. Wierzę, że okaże się, że jest znacznie szybszy niż powyższe rozwiązania.

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