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

时间:2014-11-05 06:55:00

标签: javascript jquery

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

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

http://jsfiddle.net/MGv9X/

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

请指教。提前谢谢。

2 个答案:

答案 0 :(得分:3)

你不能简单地选择一个元素>>只需一个CSS属性>>没有遍历所有计算出的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

答案 1 :(得分:0)

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

查找所有非静态元素。

Result