首页 > 解决方案 > 如何选择不包含锚点的元素?

问题描述

我正在使用 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

有任何想法吗?

谢谢

标签: javascriptjqueryhtml

解决方案


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

因此,您需要在点击内部检查该动作不是锚点

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


推荐阅读