Jquery选择表中的所有单元格除外

Question

我试图找到正确的选择器,以便在单击任何Hello单元格时将背景更改为蓝色,但如果单击Goodbye则不能.将类添加到Hello单元是一种可能的选择,但不是首选.

$(function() {
  $('#myTable td').click(function() {
    $('#myTable').addClass('unfocused');
  });
});

.unfocused {
  background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id='myTable'>

  <tr>
    <td>Hello</td>
  </tr>
  <tr>
    <td>Hello</td>
  </tr>
  <tr>
    <td>Hello</td>
  </tr>
  <tr>
    <td>Hello</td>
  </tr>

  <tr>
    <td>
      <table id='otherTable'>
        <tr>
          <td>Something</td>
        </tr>
      </table>
    </td>
  </tr>

我试过了:

 $('#myTable td').not('#otherTable td').click(....
 $('#myTable td').not('#otherTable').click(....

而那些不工作.

附上一个小提琴.

小提琴

Answer 1

也许这就是你需要的.见下面的演示

有两种选择.

由于您正在检查文本内容<th>以执行特定操作,因此您可以使用jQuery .text()来获取内容<th>.

阅读更多关于jQuery .text()的信息

您还需要JavaScript this来引用当前点击的内容<th>.

在MDN上阅读有关此关键字的更多信息

选项1

单击时,此选项会继续向.unfocused所有人添加类<th>.

$(document).ready(function() {

  $('th').click(function() {
    if ($(this).text() == "Hello") {
      $(this).addClass('unfocused');
    }
  });

});

.unfocused {
  background: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id='myTable'>
  <tr>
    <th>Hello</th>
  </tr>
  <tr>
    <th>Hello</th>
  </tr>
  <tr>
    <th>Hello</th>
  </tr>
  <tr>
    <th>Hello</th>
  </tr>
  <tr>
    <th>Hello</th>
  </tr>
  <tr>
    <th>Hello</th>
  </tr>
  <tr>
    <th>
      <table id='otherTable'>
        <tr>
          <th>Goodbye</th>
        </tr>
      </table>
    </th>
  </tr>
  <tr>
    <th>Hello</th>
  </tr>
</table>

选项2

在将类添加到当前单击之前,此选项.unfocused将从中删除所有类.<th>.unfocused<th>

$(document).ready(function() {

  $('th').click(function() {
    if ($(this).text() == "Hello") {
      $('th').removeClass('unfocused');
      $(this).addClass('unfocused');
    }
  });

});

.unfocused {
  background: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id='myTable'>
  <tr>
    <th>Hello</th>
  </tr>
  <tr>
    <th>Hello</th>
  </tr>
  <tr>
    <th>Hello</th>
  </tr>
  <tr>
    <th>Hello</th>
  </tr>
  <tr>
    <th>Hello</th>
  </tr>
  <tr>
    <th>Hello</th>
  </tr>
  <tr>
    <th>
      <table id='otherTable'>
        <tr>
          <th>Goodbye</th>
        </tr>
      </table>
    </th>
  </tr>
  <tr>
    <th>Hello</th>
  </tr>
</table>

Answer 2

好的，明白了，我想您正在寻找类似的东西

https://jsfiddle.net/smqdx20x/

$('#myTable th').not($('th > table#otherTable').parent()).not('table#otherTable th')