Есть ли способ использовать :first в javascript queryselector?

#javascript #css-selectors #jquery-selectors

#javascript #css-селекторы #jquery-селекторы

Вопрос:

У меня есть таблица, содержащая список пользователей, и я хотел бы скрыть все их дубликаты в событии. пример на изображении ниже скрывает второй tr #user-3 .

Но когда я попытался использовать temp1.querySelectorAll('tr:not(#user-3:first)') его, он не вернул ни одного узла, и это привело к ошибке недопустимого селектора. В чем может быть причина и как мне ее решить?

Ответ №1:

:first не является частью спецификации CSS, это специфично для jQuery.

Чтобы получить доступ к первому и последнему элементам, попробуйте.

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

Ответ №2:

Вы можете использовать querySelector() вместо. Он всегда возвращает вам первый элемент, соответствующий селектору.

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

Документация по querySelector

Ответ №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