CSS/JS 选择器 - Select 最后一个元素 class 不等于

Question

我正在尝试从 HTML table latest td 标签中获取 latest tr 其中最新的 td-tag 应该 not 有 class disabled.

我在纯 JavaScript 中使用 CSS 选择器进行此操作（请不要 jQuery！）。我尝试了几种可能性，但都返回 null 或 "invalid selector" 消息。 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>

在这里我需要值 Value I want，但我无法获取它。有人知道怎么回事吗？

Answer 1

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

因为你似乎想要 select 带有 JavaScript 的元素，不过，这很简单： Select 所有 td 没有 .disabled 取最后一个：

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

或范围为 table:

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>

CSS/JS 选择器 - Select 最后一个元素 class 不等于

CSS/JS selector - Select last element where class is not equal to

javascript

css

select

element