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

那些不行。

附上一个小提琴。

Fiddle

Answer 1

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

有两种选择。

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

Read more about this keyword at MDN

选项1

此选项会在点击时将.unfocused课程添加到所有<th>。

＆＃13;

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

＆＃13;

.unfocused {
  background: blue;
}

＆＃13;

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

＆＃13;

选项2

此选项会在将.unfocused课程添加到当前点击的<th>之前从所有.unfocused中删除<th>课程。

＆＃13;

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

＆＃13;

.unfocused {
  background: blue;
}

＆＃13;

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

＆＃13;

Answer 2

您正在为父母提供背景资料。所以这个解决方案可能对你有用。

First Way

$('#myTable th').click(function() {
    $('#myTable').addClass('unfocused');
    $('#otherTable').addClass('white');
});

Second Way

$('#myTable th').click(function() {
    $(this).parent().addClass('unfocused');
    $(this).parent().siblings().not(".check").addClass('unfocused');
});

Answer 3

好的，明白了，我想你正在寻找像这样的东西

https://jsfiddle.net/smqdx20x/

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

Answer 4

您可以使用:contains选择器：

$(function() {
  $('#myTable th:contains(Hello)').click(function() {
    $('#myTable').addClass('unfocused');
  });
});

.unfocused {
  background-color: blue;
}

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

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

4 个答案: