代码之家 › 专栏 › 技术社区 › Piet

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

element select css javascript

Piet · 技术社区 · 7 年前

我正在尝试从HTML表中获取 latest td公司 标签来自 最近的 tr公司 最新td标签应 not 上课残废 .

我使用CSS选择器(请不要jQuery!)在纯JavaScript中完成这项工作。我尝试了一些可能性,但都返回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 ,但我无法得到它。有人知道怎么了吗?

1 回复 | 直到 7 年前

T.J. Crowder 7 年前

CSS没有“last”伪类,并且 :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>

推荐文章

Riposte · 从单元渲染器迁移Vaadin网格聚合物元素

7 年前

YusufUMS · 在python中拆分列表元素

7 年前

Pawel · PHP XMLWriter跳过空标记

7 年前

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

7 年前

Marcus Aurelio · 是否可以在加载HTML内容后替换HTML内容?

7 年前

aSmater.Me · 如何从html字符串中选择web组件标记

7 年前

AlexD · 使用XSLT从XML行忽略特定元素并将其添加到XML行

7 年前

Roman Khegay · 元素(VueJS)|条件表呈现

7 年前

KellysOnTop23 · 从OnClicks target react获取嵌套元素

7 年前

Charles Jr · 如何从Dart中的类列表中检索属性?

7 年前