Question

我正试图从HTML表中获取latest tr 中的latest td 标记，其中最新的td-tag应该{ {1}}类禁用。

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

我的一些尝试：

not

例如：

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-child和:last-of-type不适用于您想要的内容。

由于您似乎想要使用JavaScript选择元素，因此很简单：选择没有td的所有.disabled并选择最后一个：

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 / JS选择器 - 选择类不等于

1 个答案: