1

I need to get all the elements in a page with position "absolute". I could not use $('*') because iterating on each element in the page is causing performance issue. There are nearly 8000 elements in my page and each time when i open the context menu i need to calculate the maximum z index. I have searched and i could not find an efficient solution. I am looking for solution as provided below,

$(function () {
     $("*[style*='position:absolute']").each (function () {
     alert($(this).html());
    });
});

http://jsfiddle.net/MGv9X/

but, it only works if style is inline. But i need all the elements with "absolute" position when position is specified from CSS also.

Please advice. Thanks in advance.

Roko C. Buljan
  • 196,159
  • 39
  • 305
  • 313
Hari Krishnan
  • 191
  • 1
  • 1
  • 8
  • http://stackoverflow.com/questions/3965310/get-all-css-attributes-with-jquery – David Nov 05 '14 at 06:57
  • I would really recommend just adding a class to all of your elements that would be (or "could be", if you need to, and iterate over just those) positioned absolute. – Dan Goodspeed Nov 05 '14 at 07:01
  • @DanGoodspeed what if it's too late? read `There are nearly 8000 elements in my page...` – Roko C. Buljan Nov 05 '14 at 07:01
  • And most of them will be absolutely positioned? – Dan Goodspeed Nov 05 '14 at 07:05
  • 1
    There is no magical solution. You have to loop. There are 8000 elements, so it will be slow. `$("*").filter(function () { return window.getComputedStyle(this).position === 'absolute'; });`. This is a weird requirement and it implies that you are doing something wrong. Please provide more context. It sounds like a XY problem! – Ram Nov 05 '14 at 07:07
  • Yes,obviously i have to loop. But what i am expecting is, i do not want to iterate with all the elements in the page. I need a JQuery syntax something like $("*[style*='position:absolute']") that would get all the elements with absolute position (which needs to work for both style applied inline and when applied through CSS). Once i got the elements i will iterate through the elements to perform the desired operation. – Hari Krishnan Nov 05 '14 at 08:21
  • What are you going to do after you calculate the maximum z-index? You know, I assume, that an element buried inside another one could have a very high z-index, but that is interpreted within its stacking context. So you only need to find the top-most elements with z-indexes. –  Nov 05 '14 at 08:30

2 Answers2

3

You cannot that simply select an element >> by just a CSS property >> without iterating all over your computed DOM element styles, cause those are not selectors.

So yes, * global I'm afraid. And pretty slow. But to make it faster, collect first your elements, and afterwards apply a method to your elements collection:

jsFiddle demo

var absElements = [];                            // Elements collector
$("*").css("position", function(i, pos) {
   if(pos==="absolute") absElements.push(this);  // Collect elements
});

// Now once the above is done...

$(absElements) // Do whatever you want with them
Roko C. Buljan
  • 196,159
  • 39
  • 305
  • 313
  • Sure, but he said he doesn't want to/can't use `$("*")`. –  Nov 05 '14 at 08:30
  • @Roko C. Buljan Thanks. But, I want an efficient way to get all the absolutely positioned elements. I believe JQuery selectors will achieve this, i need something like this $("*[style*='position:absolute']") (which needs to work for both style applied inline and when applied through CSS). – Hari Krishnan Nov 05 '14 at 08:31
  • 1
    @HariKrishnan The way I've shown you is one way to go. You cannot that simply select by just a CSS property >> without iterating all over your computed DOM element styles. So yes, `*` global I'm afraid. – Roko C. Buljan Nov 05 '14 at 08:43
  • @HariKrishnan so... anything wrong with the provided answer? Have you found a better solution meanwhile? – Roko C. Buljan Sep 02 '15 at 17:08
2
console.table(
[...document.querySelectorAll('*')]
.filter(n => ["static", "relative"]
.indexOf(n.computedStyleMap()
.get('position').value) === -1 )
.map(n => [ n.computedStyleMap().get('position').value, n])
)

Find all non-static elements.

Result

phoenixstudio
  • 1,776
  • 1
  • 14
  • 19
Fi1osof
  • 21
  • 3