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

【问题标题】：CSS/JS selector - Select last element where class is not equal toCSS/JS 选择器 - 选择类不等于的最后一个元素
【发布时间】：2018-02-04 00:53:27
【问题描述】：

我正在尝试从 HTML 表中获取 latest tr 中的 latest td 标记，其中最新的 td 标记应该 not 具有类禁用。

我使用 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>

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

【问题讨论】：

清楚地描述问题？查看。提供数据来复制问题？查看。在发布之前明确尝试解决问题？查看。一个问得很好的问题。
不知道我的问题有什么问题...虽然简短但直截了当
对不起，我可能不清楚。 “问得好”的意思是“问得好，问得好”。至少在我看来，这并没有什么问题。（当我看到那条评论时，我担心人们会否决，但情况似乎并非如此。）我出于欣赏而提到它：在 SO 上，特别是在 CSS 和 JS 标记中，问得好的问题太少见了。不错！
感谢您的澄清，我现在明白了。再次感谢您的回答，它工作正常！

标签： javascript css select element

【解决方案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>

【讨论】：

奇怪的是它不能只归档哪些 CSS 选择器。无论如何，感谢（快速）回答，这确实可以完成这项工作！