得到点击tr的td类？

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()

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

UPDATE

@TJ Crowder提供的代码运行良好但是，当我点击具有此类的<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 ？ '导致:before没有可用空间来添加html内容时（响应时）添加。 所以你的代码工作，但如果我点击有类的td并且没有:before我看不到要显示的内容:before 。 有可能检查：在这个td存在之前？

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

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

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

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

我不认为你可以在不支持getComputedStyle旧浏览器上获得它。 此外，测试目标浏览器以决定:before （旧伪类）和::before （其新名称）。