如何检查 TD 是否最后一个 class 行

Question

我是 jQuery 的新手，希望有人能帮助我。

我有一个很大的 HTML table 动态添加的行。

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

在这个 table 中有 editable TD（其中有 class “editable” 并且包含一个 contenteditable div) 和非 editable TD（没有 class "editable" 并且不包含 div）。

如果用户处于这样的 div 我想检查当前（最近的）TD 是否是最后一个 TD具有特定 class ("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>

Answer 1

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

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

Answer 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))...
});

以上不应该return索引如果closest('td')没有classeditable

$('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>

Answer 3

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

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

希望这对您有所帮助。 Cheer.s

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

Answer 4

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
    }    
});

如何检查 TD 是否最后一个 class 行

How to check if TD is last with class in row

javascript

jquery

jquery-selectors