jQuery選擇器中除表中的所有單元格

Question

我試圖找到正確的選擇器，以便在單擊任何Hello單元格時將背景更改為藍色，但是如果單擊“再見”，則無法將背景更改為藍色。 將類添加到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

單擊此選項時，將一直向所有<th>添加.unfocused類。

 $(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>之前，從所有<th>刪除.unfocused類。

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

您正在為父母提供背景。 因此，該解決方案可能對您有用。

第一路

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

第二路

$('#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>