Question

我需要找到给定节点中的所有块元素。块元素不仅仅是CSS中display:block的元素，还包括div和p等默认块元素。

我知道我可以获得元素的计算样式并检查display属性，但是，我的代码将在一个长循环中执行并且每次都获得计算样式刷新回流堆栈，所以它会非常膨胀。

如果没有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

对于这个问题的答案，我们考虑了通用CSS选择器和jQuery .filter()函数：

$("*").filter(function(index) {
    return $(this).css("display") == 'block';
});

此代码查看它可以找到的所有元素，如果它们通过过滤器，则返回元素列表。如果过滤器函数为该元素返回true，则该元素将传递过滤器。在这种情况下，过滤器会测试每个找到的元素的display属性，并根据所需的值对其进行测试。

现在，您还提到要查找p和div元素。幸运的是，我们还有一种方法可以在过滤功能中找到它们。使用jQuery的prop函数，我们可以返回元素的属性。在这种情况下，我们感兴趣的是被过滤的DOM元素的tagName属性。将此功能与上述过滤器结合使用，我们得到：

$("*").filter(function(index) {
    var $this = $(this);
    var tagName = $this.prop("tagName").toLowerCase();
    return $this.css("display") == 'block' || tagName == 'p' || tagName == 'div';
});

注意我们如何将tagName变量设置为小写，因为我们不能指望tagName属性的某种情况（如果我错了，请纠正我）。

Answer 2

我看到的最好方法是

为所有not-native块元素和
使用jQuery的mulitple-selector。

然后我们可以像这样简单地完成这个

<强> CSS：

.block { display: block; }

<强> jQuery的：

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

如果要包含所有块元素。这是link

Answer 3

也许这有帮助。

$('*').each( function(){
    if ($(this).css("display") === "block")
        $(this).css("background", "yellow") ;   
});

jsfiddle

查找所有块元素

3 个答案:

然后我们可以像这样简单地完成这个