jquery - 如何更改每个表格行中最后一个单元格的 css 类？

Question

我的标记如下所示：

<div role="row" id="row1grid">
    <div role="cell" class="myClass"></div>
    <div role="cell" class="myClass"></div>
    <div role="cell" class="myClass"></div>
    <div role="cell" class="myClass"></div>
</div>
<div role="row" id="row2grid">
    <div role="cell" class="myClass"></div>
    <div role="cell" class="myClass"></div>
    <div role="cell" class="myClass"></div>
    <div role="cell" class="myClass"></div>
</div>
<div role="row" id="row3grid">
    <div role="cell" class="myClass"></div>
    <div role="cell" class="myClass"></div>
    <div role="cell" class="myClass"></div>
    <div role="cell" class="myClass"></div>
</div>

但我想使用 jQuery 更改每行中最后一个单元格的类名：

<div role="row" id="row1grid">
    <div role="cell" class="myClass"></div>
    <div role="cell" class="myClass"></div>
    <div role="cell" class="myClass"></div>
    <div role="cell" class="myClass2"></div>
</div>
<div role="row" id="row2grid">
    <div role="cell" class="myClass"></div>
    <div role="cell" class="myClass"></div>
    <div role="cell" class="myClass"></div>
    <div role="cell" class="myClass2"></div>
</div>
<div role="row" id="row3grid">
    <div role="cell" class="myClass"></div>
    <div role="cell" class="myClass"></div>
    <div role="cell" class="myClass"></div>
    <div role="cell" class="myClass2"></div>
</div>

我可以按角色选择所有行，如下所示：

$("div[role='row']")

但是我如何从那里找到每行中的最后一个单元格并更改其类？

任何帮助表示赞赏！

谢谢

汉克

Answer 1

$("div[role='row'] div:last")应该选择div行中的最后一个。

然后，您可以使用以下方法修改类：

$("div[role='row'] div:last").removeClass('myClass').addClass('myClass2');

或者

$("div[role='row'] div:last")[0].className = "myClass2"

Answer 2

你可以

$("div[role='row'] > div:last-child").removeClass('myClass').addClass('myClass2')

演示：小提琴

或者

$("div[role='row']").children(':last-child').removeClass('myClass').addClass('myClass2')