Question

我有一个位于某个表格内的元素。我需要得到他的tbody元素。

我该怎么做？

尝试$(this).closest('tbody')

但它看起来不起作用..

我的代码：

$("table").on('click', ['td'], function(event) {

    if ($(this).hasClass('uneditable')) { return; }
    // here I need to check the tbody element
    console.log($(this).closest("tbody"))
    }

也许我这样做错了，因为我只想在点击具有元素特定类的表时才应用此函数：

表格 - dattable
tbody - editabe
td - 不是uneditable

谢谢！

Answer 1

您应该使用$("table").on('click', 'td',和不 $("table").on('click', ['td'],

console.log($('#a1').closest('tbody').length)

$("table").on('click', 'td', function(event) {
  if ($(this).hasClass('uneditable')) { return; }
  // here I need to check the tbody element
  console.log($(this).closest("tbody").length)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td><div id="a1">asdf</div></td>
  </tr>
</table>

使用['td'] - this是对table（而非单元格 - td）的引用，因此您无法使用closest }找到tbody元素。

更新

如果您只想选择不具有特定类的td，您可以使用:not伪类：

$("table").on('click', 'td:not(.uneditable)', function(event) {
  console.log($(this).closest("tbody").length)
});

.uneditable {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td class="t"><div>asdf</div></td>
  </tr><tr>
    <td class="uneditable"><div>asdf</div></td>
  </tr><tr>
    <td class="t"><div>asdf</div></td>
  </tr>
</table>

Answer 2

所以只需将click单击到具有该类的tbody，然后单击检查该类。

$("table.dattable tbody.editable").on("click", "td:not(.uneditable)", function(){});

或者id .editable是动态的，而不是将其移动到另一个选择器

$("table.dattable").on("click", "tbody.editable td:not(.uneditable)", function(){});

Answer 3

使用:not()

$("table").on('click', 'td:not(".uneditable")', function(event) {

});

仅供参考，不要忘记将['td']替换为td

console.log($('#a1').closest('tbody').length)
$("table.datatable").on('click', 'td:not(".uneditable")', function(event) {
  console.log($(this).closest("tbody.editable").length)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>1st table</h1>
<table class="datatable">
  <tbody class="editable">
  <tr>
    <td class="uneditable"><div id="a1">ABC</div></td>
    <td class="uneditable"><div id="a1">XYZ</div></td>
    <td><div id="a1">PQR</div></td>
  </tr>
  </tbody>
</table>
<h1>2nd table</h1>
<table class="datatableNot">
  <tbody class="editable">
  <tr>
    <td class="uneditable"><div id="a1">ABC</div></td>
    <td class="uneditable"><div id="a1">XYZ</div></td>
    <td><div id="a1">PQR</div></td>
  </tr>
  </tbody>
</table>

jQuery - element.on点击匹配案例

3 个答案:

更新