如何检查TD是否是最后一个班级答案

【问题标题】：How to check if TD is last with class in row如何检查TD是否是最后一个班级
【发布时间】：2015-08-26 21:31:30
【问题描述】：

我是 jQuery 新手，希望有人可以帮助我。

我有一个带有动态添加行的大型 HTML 表格。

表格具有标准结构（包括thead、tbody 和tfoot）。

在此表中，有可编辑的 TD（具有“editable”类并包含可内容编辑的 div）和不可编辑的 TD（不具有“可编辑”类且不包含 div）。

如果用户在这样的 div 中，我想检查当前（最近的）TD 是同一行中具有特定类的最后一个 TD （“editable”）。

我尝试了以下方法，但这在这里不起作用。谁能告诉我我做错了什么？

我的 jQuery（已准备好文档）：

$(document).keydown(function(e){
    var current = $(e.target);
    // ...
    if($(current).closest('td').is('td.editable:last')){
        alert('last editable td in current row'); // test alert
    }
    // ...
});

我的 HTML（示例行）：

<tr>
    <!-- ... -->
    <td class="editable"><div contenteditable="true"></div></td> <!-- editable -->
    <td class="editable"><div contenteditable="true"></div></td> <!-- editable -->
    <td></td> <!-- non-editable -->
    <td></td> <!-- non-editable -->
    <td class="editable"><div contenteditable="true"></div></td> <!-- editable -->
    <!-- ... -->
</tr>

【问题讨论】：

标签： javascript jquery jquery-selectors

【解决方案1】：

试试:last-of-type 选择器？切勿使用:last 或:first，因为它们在每个浏览器中的实现方式都不同！

if ($(current).closest('td').is('td.editable:last-of-type')) {

【讨论】：

但是last-of-type不可能匹配没有.editable的td吗？
它包括类。不是属性。 :D 所以这行得通！
@keewee279 很高兴它有帮助。
@PraveenKumar：对不起，因为我是新手，所以我还想询问以下内容以确保我做对了：这将只涉及当前行（tr），即我需要什么，对吗？另外，是否也有相反的“第一类”？
更新：再次感谢。我试过这个，它在行内工作正常，但我无法让它在行的末尾工作，所以我接受了 Ammar 的解决方案。无论如何感谢您的帮助！

【解决方案2】：

使用 jQuery index() 喜欢

$('div').click(function() {
    var editables = $(this).closest('tr').find('td.editable')
    var count = editables.length;
    if(editables.index($(this).closest('td')) == (count - 1))...
});

如果closest('td') 没有类editable，则上述内容不应返回索引

$('div').click(function() {
  var editables = $(this).closest('tr').find('td.editable')
  var count = editables.length;
  console.log('Is last editable td: ' + (editables.index($(this).closest('td')) == (count - 1)));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
  <tr>
    <!-- ... -->
    <td class="editable">
      <div contenteditable="true">test</div>
    </td>
    <!-- editable -->
    <td class="editable">
      <div contenteditable="true">test</div>
    </td>
    <!-- editable -->
    <td>
      <div contenteditable="true">not editable</div>
    </td>
    <!-- non-editable -->
    <td>
      <div contenteditable="true">not editable</div>
    </td>
    <!-- non-editable -->
    <td class="editable">
      <div contenteditable="true">test</div>
    </td>
    <!-- editable -->
    <td>
      <div contenteditable="true">not editable</div>
    </td>
    <!-- ... -->
  </tr>
</table>

【讨论】：

也非常感谢！
更新：这看起来很有趣，但我无法让它工作。我不需要像 $(current).closest('tr').find... 这样的东西来始终引用当前行吗？
@keewee279，看看代码sn-p，如果你还有问题请告诉我
非常感谢 - 这很有效，实际上比其他方法更好。会接受这个。再次感谢！ :)
阿马尔！恭喜... Plus1 我这边也是！

【解决方案3】：

Fiddle

<table>
    <tr>
        <td class="editable"><div contenteditable="true">11</div></td> 
        <td class="editable"><div contenteditable="true">22</div></td>
        <td>33</td> 
        <td>44</td> 
        <td class="editable"><div contenteditable="true">55</div></td> 
    </tr>
</table>

 $("table tr td.editable").keydown(function(){   
    var col = $(this).parent().children().index($(this));
    if(col == $(this).parent().children().size() - 1){
        alert('last editable td in current row'); // test alert
    }    
});

【讨论】：

也谢谢你！

【解决方案4】：

你可以试试这个：https://jsfiddle.net/alaingoldman/5cseugvs/1

我所做的基本上是针对 table 标记并使用伪类 last-of-type 查看它的后代。

希望这会有所帮助。干杯。s

$('table tr:last-of-type').css({backgroundColor: "pink"})

【讨论】：