找到位置“绝对”的页面中的所有元素

Question

我需要获取位置＆＃34;绝对＆＃34;的页面中的所有元素。我无法使用$（＆＃39; *＆＃39;）因为迭代页面中的每个元素都会导致性能问题。我的页面中有近8000个元素，每次打开上下文菜单时，我都需要计算最大z索引。我搜索过，找不到有效的解决方案。我正在寻找下面提供的解决方案，

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

http://jsfiddle.net/MGv9X/

但是，只有在样式为内联时才有效。但我需要所有的元素＆＃34;绝对＆＃34;从CSS指定位置时的位置。

请指教。提前谢谢。

Answer 1

你不能简单地选择一个元素＆gt;＆gt;只需一个CSS属性＆gt;＆gt;没有遍历所有计算出的DOM元素样式，因为它们不是selectors。

是的，*全球我害怕。而且很慢。但为了加快速度，先收集元素，然后将方法应用到元素集合中：

<强> 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

Answer 2

console.table(
[...document.querySelectorAll('*')]
.filter(n => ["static", "relative"]
.indexOf(n.computedStyleMap()
.get('position').value) === -1 )
.map(n => [ n.computedStyleMap().get('position').value, n])
)

查找所有非静态元素。