Question

如何从点击的tr中获取td类？

我有这个结构：

<tr role="row" data-id="1" class="odd parent">
   <td class="sorting_1">test</td>
   <td>foo</td>
   <td>3223232</td>
</tr>

我写了这段代码：

$('#datatable > tbody > tr').click(function()

如果用户点击td上的课程sorting_1，我想要做的就是阻止处理上面的代码。每个tr都有一个这个类的td，所以我需要检查用户是否已经点击了这个td类，并阻止代码执行。

更新

@ T.J提供的代码。克劳德工作得很好但是，当我点击有这个课程的<td>我无法继续代码时，这是正确的。但我需要检查td是否还包含::before，实际上这将在html没有足够空间（响应）时添加，在这种情况下正确的结构是：

<tr role="row" class="odd parent" data-id="1">
    <td class="sorting_1">test</td>
       ::before
       "test"
    <td>foo</td>
    <td>3223232</td>
</tr>

Answer 1

您可以通过告诉处理程序忽略该类的td来执行此操作：

$('#datatable > tbody > tr').on("click", "td:not(.sorting_1)", function(e) (
// -------------------------^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    // ...
});

（这包括以下两种情况，直接点击以及td后代的点击次数。）

或者，您可以通过检查处理程序收到的事件对象的target属性来执行此操作：

$('#datatable > tbody > tr').click(function(e) (
    // -------------------------------------^
    if ($(e.target).hasClass("sorting_1")) {
        // Don't do it
        return;
    }
});

如果td中可能包含其他元素（span，em等），您可以使用closest查找：

$('#datatable > tbody > tr').click(function(e) (
    // -------------------------------------^
    if ($(e.target).closest(".sorting_1").length) {
        // Don't do it
        return;
    }
});

重新提出您的问题：

是否可以检查td是否有:before？＆＃39;因为当没有可用于适合html内容的空间（响应）时，会添加:before。所以你的代码工作，但如果我点击有类的td并且没有:before我看不到要显示的内容。可以检查：在此td存在之前？

您可以在现代浏览器上从getComputedStyle获取该内容：

＆＃13;

console.log(
  getComputedStyle($("#target")[0], "::before").content
);

＆＃13;

#target::before {
  content: 'Life, the Universe, and Everything? '
}

＆＃13;

<div id="target">42</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

我认为您不能在不支持getComputedStyle的旧浏览器上获取它。此外，测试您的目标浏览器，以便在:before（旧的伪类）和::before（其新名称）之间做出决定。

获取点击tr的td类？

1 个答案: