如何用jQuery选择第一个块级父级？

考虑以下标记：

 
 lorem ipsum 
  

如何使用jQuery找到块级别（即具有display: block ）的span＃3的第一个父级？ 在这种情况下，这将是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 } });
$('#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将是display：block的父元素，如果没有，它将是一个没有项目的jQuery元素。

Answer 4

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