查找所有块元素

Question

我需要找到给定节点中的所有块元素.块元素不仅仅是display:blockCSS中的元素,还有像div和的默认块元素p.

我知道我可以获得元素的计算样式并检查display属性,但是,我的代码将在一个长循环中执行并且每次都获得计算样式刷新reflow堆栈,因此它将非常广泛.

我正在寻找一些没有做到这一点的技巧getComputedStyle.

编辑

这是我想要改进的当前代码:

var isBlockOrLineBreak = function(node)
{
    if (!node) {
        return false;
    }
    var nodeType = node.nodeType;
    return nodeType == 1 && (!inlineDisplayRegex.test(getComputedStyleProperty(node, "display")) || node.tagName === "BR")
        || nodeType == 9 || nodeType == 11;
};

另一个编辑

jQuery的.css调用了getComputedStyle.所以这不是我想要的.

我的解决方案

谢谢大家的建议.不幸的是,它们都不符合我的要求.经过大量的文档挖掘后,我意识到如果没有getComputedStyle,没有真正的方法可以做到这一点.但是,我想出的代码应尽可能避免getComputedStyle.这是代码:

$.extend($.expr[':'], {
    block: function(a) {
        var tagNames = {
            "ADDRESS": true,"BLOCKQUOTE": true,"CENTER": true,"DIR": true,"DIV": true,
            "DL": true,"FIELDSET": true,"FORM": true,"H1": true,"H2": true,"H3": true,
            "H4": true,"H5": true,"H6": true,"HR": true,"ISINDEX": true,"MENU": true,
            "NOFRAMES": true,"NOSCRIPT": true,"OL": true,"P": true,"PRE": true,"TABLE": true,
            "UL": true,"DD": true,"DT": true,"FRAMESET": true,"LI": true,"TBODY": true,
            "TD": true,"TFOOT": true,"TH": true,"THEAD": true,"TR": true
        };
        return $(a).is(function() {
            if (tagNames[this.tagName.toUpperCase()]) {
                if (this.style.display === "block")
                {
                    return true;
                }
                if (this.style.display !== "" || this.style.float !== "")
                {
                    return false;
                }
                else {
                    return $(this).css("display") === "block";
                }
            }
            else {
                if (this.style.display === "block") {
                    return
                }
                else {
                    return $(this).css("display") === "block";
                }
            }
        });
    }
});

使用此代码非常简单,只需执行$(":block")或$("form:block").这将避免在很多情况下使用.css属性,并且只作为最后的手段回退它.

Starx的回答让我想到了这个想法,所以我要将他的信息标记为答案.

Answer 1

我认为最好的方法是

• 为所有not-native块元素分配一个公共类并
• 使用 jQuery 的mulitple-selector.

那么我们就可以像这样简单地做到这一点

CSS：

.block { display: block; }

jQuery：

var blockelements = $("div, p, table, ..., .block"); 
                                   // ^ represents other block tags

如果要包含所有块元素。这是一个链接