Find all block elements

Question

I need to find all the elements of a block in a given node. Block elements are not only elements that have display:block in CSS, but also default block elements such as div and p .

I know that I can just get the computed style of the element and check the display property, however, my code will execute in a long loop, and the computed styles erase the reflow stack every time, so it will be very expansive.

I am looking for a trick to do this without getComputedStyle .

Edit

Here is my current code that I would like to improve:

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

Other editing

jQuery.css calls getComputedStyle under the hood. So not what I'm looking for.

My decision

Thanks everyone for the suggestions. Unfortunately, none of them matched what I was looking for. After repeatedly processing the documentation, I realized that there is no real way to do this without getComputedStyle. However, I came up with code that should avoid getComputedStyle as much as humanly possible. Here is the code:

 $.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"; } } }); } }); 

Using this code is very simple, just do $ (": block") or $ ("form: block"). This will avoid the use of the .css property in many cases and only refuse it in a pinch.

Starx's answer gave me an idea to do this, so I'm going to mark his post as an answer.

Answer 1

The best way I see is

• assign a common class to all not-native elements and
• using jQuery mulitple-selector .

Then we can do it as simple as this:

CSS

 .block { display: block; } 

JQuery

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

If you want to include all the elements of the block. Here is the link

Answer 2

To answer this problem, we take into account the universal CSS selector and the jQuery .filter() function:

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

This code scans all the elements that it can find, and returns a list of elements if they pass a filter. An element passes a filter if the filter function returns true for this element. In this case, the filter checks the display property of each element found and checks it for the desired value.

Now you have also noted that you want to find the p and div elements. Fortunately, we also have a way to find them in the filter function. Using the jQuery prop function, we can return the property of the element. In this case, we are interested in the tagName property of the filtered DOM elements. Combining this function with the above filter, we get:

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

Notice how we set the tagName variable to lowercase because we cannot expect a specific case for the tagName property (correct me if I am wrong).

Answer 3

perhaps this helps.

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

jsfiddle