javascript - CSS/JS 选择器 - 选择类不等于的最后一个元素

Question

我正在尝试从 HTML 表中获取 latest td 标记，其中 latest tr 是最新的 td-tag 应该不有 disabled 类。

我使用 CSS 选择器在纯 JavaScript 中执行此操作(请不要使用 jQuery!)。我尝试了几种可能性，但都返回 null 或“无效选择器”消息。还有发布在 here 中的解决方案对我不起作用。

我的一些尝试:

var table = document.getElementById('example');
var test1 = table.querySelector('tr:last-child > td:nth-last-child(:not(.disabled))');
var test2 = table.querySelector('tr:last-child > td:nth-last-child:not(.disabled)');
var test3 = table.querySelector('tr:last-child > td:nth-last-child(1 of :not(.disabled))');
var test4 = table.querySelector('tr:last-child > td:not(.disabled):last-child');

例如:

<table id="example">
    <tr>
        <td> ... </td>
        <td class="disabled"> ... </td>
        <td> ... </td>
    </tr>
    <tr>
        <td class="disabled"> ... </td>
        <td> ... </td>
        <td> ... </td>
    </tr>
    <tr>
        <td> ... </td>
        <td> Value I want </td>
        <td class="disabled"> ... </td>
    </tr>
</table>

在这里我需要值我想要的值，但我无法获取它。有人知道出了什么问题吗？

Answer 1

CSS 没有“last”伪类，:last-child 和 :last-of-type 不适用于您想要的。

由于您似乎想用 JavaScript 选择元素，所以很简单:选择所有没有 .disabled 的 td 并取最后一个:

var list = document.querySelectorAll("td:not(.disabled)");
var last = list[list.length - 1];

或范围为该表:

var list = document.querySelectorAll("#example td:not(.disabled)");
var last = list[list.length - 1];

例子:

var list = document.querySelectorAll("#example td:not(.disabled)");
var last = list[list.length - 1];
console.log(last.innerHTML);

<table id="example">
    <tr>
        <td> ... </td>
        <td class="disabled"> ... </td>
        <td> ... </td>
    </tr>
    <tr>
        <td class="disabled"> ... </td>
        <td> ... </td>
        <td> ... </td>
    </tr>
    <tr>
        <td> ... </td>
        <td> Value I want </td>
        <td class="disabled"> ... </td>
    </tr>
</table>