有没有办法在 javascript 查询选择器中使用 :first？

Question

我有一个包含用户列表的 table，我想在某个事件中隐藏所有重复项。下图中的示例隐藏了第二个 tr#user-3。

但是当我尝试使用 temp1.querySelectorAll('tr:not(#user-3:first)') 时它没有 return 任何节点而是它带来了无效的选择器错误。可能是什么原因，我该如何解决？

Answer 1

:first 不是 CSS 规范的一部分，这是 jQuery 规范的一部分。

要访问第一个和最后一个元素，请尝试。

    var nodes = temp1.querySelectorAll('tr');
    var first = nodes[0];
    var last = nodes[nodes.length- 1];

Answer 2

您可以改用 querySelector()。它总是让您找到与选择器匹配的第一个元素。

const firstEl = temp1.querySelector('tr');

QuerySelector Documentation

Answer 3

我无法弄清楚给定问题的问题所在。但是下面的代码似乎有效。

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<table class="tables">
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr id="user3">
        <td>a</td>
        <td>b</td>
        <td>c</td>
    </tr>
    <tr id="user3">
        <td>a</td>
        <td>b</td>
        <td>c</td>
    </tr>
    <tr id="user3">
        <td>a</td>
        <td>b</td>
        <td>c</td>
    </tr>
</table>
</body>
<script>
    window.onload = function(){
        var table = document.querySelectorAll(".tables tr#user3:not(:nth-child(2))");
        //console.log(table);
        table.forEach(el => {
            el.style.backgroundColor = "red";
        })
    }
</script>
</html>

该代码也适用于 last-child

有没有办法在 javascript 查询选择器中使用 :first？

Is there a way to use :first in javascript queryselector?

javascript

css-selectors

jquery-selectors