javascript - jQuery 选择除一个元素之外的所有元素

Question

我有如下所示的 html，想要选择除 <a> 之外的所有内容元素。最终目标是拥有两个可点击区域，并且每个区域执行不同的操作。但我在将更大的区域与 <a> 隔离开来时遇到了麻烦。元素。

<td title="title1" class="class1"> <p class="pclass1">value1</p></td>
<td>
    <p class="someClass1" title="someTitle1">someValue1</p>
    <p class="someClass2" title="someTitle2">someValue2</p></td>
    <p class="someClass3" title="someTitle3">someValue3</p>
</td>

<td><p title="otherTitle1" class="otherClass1">otherValue1</p></td>
<td><p title="otherTitle2" class="otherClass2">otherValue2</p></td>
<td><p title="otherTitle3" class="otherClass3">otherValue3</p></td>
<td><p title="otherTitle4" class="otherClass4">otherValue4</p></td>
<td title="title2" class="class2"><a href="#" class="no-select">don't select me</a></td>

那么是否可以选择除最后一个“td”中的“a”之外的所有“td”？

我尝试过类似 'td:not(a)', 'td:not(.no-select)' 的操作没有成功

Answer 1

最简单的方法是将点击处理程序委托(delegate)给公共(public)父 tr 元素，然后检测哪个元素引发了事件并运行适当的逻辑。像这样的事情:

$('tr').click(function(e) {
  if ($(e.target).is('.no-select')) {
    console.log('link clicked...');
  } else {
    console.log('row clicked...');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td title="title1" class="class1"><p class="pclass1">value1</p></td>
    <td>
      <p class="someClass1" title="someTitle1">someValue1</p>
      <p class="someClass2" title="someTitle2">someValue2</p>
    </td>
    <td><p class="someClass3" title="someTitle3">someValue3</p></td>
    <td><p title="otherTitle1" class="otherClass1">otherValue1</p></td>
    <td><p title="otherTitle2" class="otherClass2">otherValue2</p></td>
    <td><p title="otherTitle3" class="otherClass3">otherValue3</p></td>
    <td><p title="otherTitle4" class="otherClass4">otherValue4</p></td>
    <td title="title2" class="class2"><a href="#" class="no-select">don't select me</a></td>
  </tr>
</table>