¿Cómo seleccionar el primer padre de nivel de bloque con jQuery?

Question

Considere el siguiente marcado:

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

¿Cómo puedo encontrar el primer padre de la amplitud # 3 que es de nivel de bloque (es decir, ha display: block) usando jQuery? En este caso, sería h1#1.

Answer 1

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

http://jsfiddle.net/DFURw/

Answer 2

Hmm. . . Creo que sería

 

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

Esta solución es la más corta y no buscar ningún elemento más de la cuenta:

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

Cuando terminó, $ EL será o bien un elemento principal que es display: block , o si no hay ninguno, será un elemento jQuery sin elementos.

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. Entonces, sin más preámbulos, aquí está mi solución. Creo que encontrará que es mucho más rápido que las soluciones anteriores.

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