Как выбрать родительский уровень первого блока с помощью 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

Согласно W3C, элемент уровня блока может иметь отображение всего, чье содержимое обрабатывается как таблица или блок . Итак, без лишних слов, вот мое решение. Я полагаю, вы найдете это намного быстрее, чем приведенные выше решения.

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

Answer 4

Это решение самое короткое и не будет искать больше элементов, чем необходимо:

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

После завершения $ el будет либо родительским элементом display: block, либо, если его нет, будет элементом jQuery без элементов.