Come selezionare il primo livello di blocco padre con jQuery?

Question

Si consideri il seguente markup:

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

Come posso trovare il primo genitore dello span # 3, che è di livello di blocco (vale a dire è display: block) utilizzando jQuery? In questo caso sarebbe h1#1.

Answer 1

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

http://jsfiddle.net/DFURw/

Answer 2

Hmm. . . Penso che sarebbe

 

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

Questa soluzione è la più breve e non saranno ricercare più elementi del necessario:

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

Al termine, $ el sarà o un elemento padre che è display: block , o se non ce ne sono, sarà un elemento jQuery senza elementi.

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. Quindi, senza ulteriore addio, ecco la mia soluzione. Credo che lo troverai molto più veloce delle soluzioni di cui sopra.

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