如何选择不包含锚点的元素？ [复制]答案

【问题标题】：How can I select elements which don't contain anchors? [duplicate]如何选择不包含锚点的元素？ [复制]
【发布时间】：2018-11-28 03:33:45
【问题描述】：

我正在使用 jQuery 在单击某个“tr”时执行一些操作，但在该对象中，我希望 jQuery 忽略包含 url 的子 td 之一。有什么想法可以做到这一点吗？

<tr class="parent_report>
 <tr class="child1">Some text</tr>
 <tr class="child2">Some text</tr>
 <tr class="child3"><span><a href="./">Some text</a></span></tr>
</tr>

还有 jQuery：

$(".special_report, .new_report ,.parent_report").not("span").click(function(event){
  event.preventDefault();    
 //do some action

所以我想在点击 child3 中的链接时忽略 jQuery，而不是执行配置给 jQuery 的操作

有什么想法吗？

谢谢

【问题讨论】：

我尝试使用 not() 但由于某种原因它不起作用..可能是多选..
没有引用 ajax 的代码（jQuery.ajax 或 fetch 或 XMLHttpRequest）。你是说 jQuery 本身吗？
您的代码表明您选择的元素不能是跨度。
代码和Ajax无关，你提到Ajax的地方，我都改成jQuery了……有些还是不对，但还是更好。

标签： javascript jquery html

【解决方案1】：

您是说您选择的任何类都不能是跨度。你不是说点击了什么......

所以您需要在点击内部检查该操作不是锚点

$("tr").on("click", function (evt) {
  if ($(evt.target).closest("a").length) {
    return true
  } else {
    console.log("tr was clicked");
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>foo</td>
      <td>bar</td>
      <td>baz</td>
      <td class="child3"><span><a href="./">Some text</a></span></td>
    </tr>
  </tbody>
</table>

如果您不想点击 td，那么就忽略该 td 上的点击

$("tr").on("click", "td:not(:has(a))", function(evt) {
  console.log("tr was clicked");
})

td {
  padding: 1em;
  border: 1px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>foo</td>
      <td>bar</td>
      <td>baz</td>
      <td class="child3"><span><a href="./">Some text</a></span></td>
    </tr>
  </tbody>
</table>

【讨论】：

为所有数据单元格添加一些内边距，您可以在锚点外点击。
我读过他们不应该点击锚点......所以如果他们根本不想点击单元格，那也没什么不同......

【解决方案2】：

我会将您的点击事件移至表格单元格以获得更直观的代码。

$("td").not(':has("a")').click(function () {
    console.log("tr was clicked");
});

<style>
td {
    padding: 10px;
    background: pink;
}
a {
    background: lightgreen;
}
</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>foo</td>
      <td>bar</td>
      <td>baz</td>
      <td class="child3"><span><a href="javascript:void(0)">Some text</a></span></td>
    </tr>
  </tbody>
</table>

【讨论】：