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

Question

我的代码中有一个表，其中包含很多行，每行都包含一些 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 吗？

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