如何在 DOM 中找到具有 z-index 值的所有元素答案

【问题标题】：How I can find all the elements in DOM having z-index value如何在 DOM 中找到具有 z-index 值的所有元素
【发布时间】：2019-01-22 23:21:15
【问题描述】：

我的代码中有一个表，其中包含很多行，每行都包含一些 td，我想找到所有具有 z-index 值的 td。

例如-

<table>
    <thead>
        <tr>
            <td>name</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td style="z-index: 10">jhon</td>
        </tr>
        <tr>
            <td>
                doy
            </td>
        </tr>
        <tr>
            <td style="z-index: 20">jam</td>
        </tr>
    </tbody>
</table>

谁能帮我在不使用任何循环的情况下找到所有具有 z-index 值的 td？

【问题讨论】：

从技术上讲，这应该可以工作：$('td[style*="z-index"]')。基本上你使用的是原生属性选择器。
@Terry 虽然只针对那些将 z-index 设置为内联的元素，对吗？
@OliverRadini 是的。这就是 OP 所要求的，并且与您的答案相似。如果你想得到计算出来的样式，使用element.style也行不通。
@Terry 啊，我在问题中找不到；他们给出的示例仅以这种方式指定它们，但假设这是可以为它们设置 z-index 的唯一方式似乎有点不可靠？
另外，没有理由要避免循环。

标签： javascript jquery

【解决方案1】：

你可以找到所有的td，然后过滤掉那些没有设置任何z-index的。我很确定没有办法在比这更具体的级别上进行初始选择。

const test = [
  ...document.getElementsByTagName("td")
].filter(x => x.style.zIndex !== "")

test.forEach(x => x.style.color = "#"+((1<<24)*Math.random()|0).toString(16))

console.dir(test)

<table>
    <thead>
        <tr>
            <td>name</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td style="z-index: 10">jhon</td>
        </tr>
        <tr>
            <td>
                doy
            </td>
        </tr>
        <tr>
            <td style="z-index: 20">jam</td>
        </tr>
    </tbody>
</table>

【讨论】：

感谢@oliver 的帮助，但我已经知道这种方法，但我想在不通过 jquery 或 JS 添加任何循环的情况下找到它。
@onkar.v 我很确定这是不可能的
是的，我已经为此尝试了很多东西，但没有找到任何东西:(

【解决方案2】：

所以这是给你相同的结果，但使用 jquery，这就是为什么我添加了一个

position:relative

For z-index to work correctly, every element that has a z-index property must also have any position set ( e.g.position:relative )

$(document).ready(function() {
  $("td").each(function() {

    // td Element
    const $this = $(this);

    // your logic condition 
    if ($this.css("z-index") !== "auto") {
      $this.css("color", "red");
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table>
  <thead>
    <tr>
      <td>name</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style=" position: relative; z-index: 10">jhon</td>
    </tr>
    <tr>
      <td>
        doy
      </td>
    </tr>
    <tr>
      <td style=" position: relative; z-index: 20">jam</td>
    </tr>
  </tbody>
</table>

【讨论】：