使用 jQuery 在嵌套表结构中选择最高级别的 td答案

【问题标题】：Select highest level td's in nested table structure with jQuery使用 jQuery 在嵌套表结构中选择最高级别的 td
【发布时间】：2023-03-20 01:39:01
【问题描述】：

我正在尝试在这样的嵌套表结构中选择最高级别的tds（在第一级tds 中，有更多的表和更多的tds 不应选择

<table>
  <tr>
    <td>        <!-- this is what I want to select -->
      <table /> <!-- more td's inside that I don't want to select -->
    </td>
  </tr>
  <tr>
    <td>        <!-- this is what I want to select -->
      <table /> <!-- more td's inside that I don't want to select -->
    </td>
  </tr>
</table>

选择所需的tds 很简单：table > tr > td。但是可能有tables 带有tbody 标签：

<table>
  <tbody>
    <tr>
      <td>        <!-- this is what I want to select -->
        <table /> <!-- more td's inside that I don't want to select -->
      </td>
    </tr>
    <tr>
      <td>        <!-- this is what I want to select -->
        <table /> <!-- more td's inside that I don't want to select -->
      </td>
    </tr>
  </tbody>
</table>

这本身也很简单：table > tbody > tr > td。

如何找到一个不依赖> 子选择器并且通用的简单表达式？

table tr > td 之类的东西（这显然行不通，因为它在嵌套表中选择了 tds。谢谢！

【问题讨论】：

您必须找到包装表的独特之处才能定位它，例如它的父元素、ID、索引等。
table > tbody > tr > td 将普遍适用，也可能是最快的解决方案。你为什么反对它？
大多数浏览器会假设您忘记添加 tbody 并会自行添加（由于 doctype 有一些例外）。我也知道这听起来很无聊，但如果你只有两个可能性，那么像$('table > tbody > tr > td', 'table > tr > td'); 这样的选择器就不能解决问题吗？否则，将需要大量的家长校对才能获得正确的td
@Spokey 当然可以，但我渴望学习 - 所以我认为可能有更好的方法来做到这一点......

标签： jquery dom jquery-selectors

【解决方案1】：

正如我在评论中所表达的，我完全赞成table > tbody > tr > td，但作为替代方案，您可以使用

td:not(td td)

这会选择不是td 元素后代的所有td 元素。但请注意，这仅适用于 jQuery，因为您通常不能将复杂的选择器与 :not 一起使用。

或者，使用.not 方法：

$('td').not('td td')

【讨论】：

【解决方案2】：

正确答案是：

$('#tbl1').find('tr:first').parent().children().not(':not(td)')

.not(':not(td)') 移除 not td 标签。

例子：

<table id="tbl1">
<tr>
  <td>1</td>
  <input type="hidden" name="hidden1" value="something"> 
  <td>2</td>
  <td> 
       <table>
          <tr><td>1</td>
            <input type="hidden" name="hidden1" value="something"> 
            <td>2</td>
          </tr>
        </table>
</td>
</tr>
</table>

<table id="tbl2">
<tbody>
<tr>
  <td>1</td>
  <input type="hidden" name="hidden1" value="something"> 
  <td>2</td>
  <td> 
       <table>
          <tr>
            <td>1</td>
            <input type="hidden" name="hidden1" value="something"> 
            <td>2</td>
          </tr>
        </table>
</td>
</tr>
</tbody>
</table>

代码：

var r1 = $('#tbl1').find('tr:first').children();
var r2 = $('#tbl1').find('tr:first').children().not(':not(td)');
var r3 = $('#tbl2').find('tr:first').children();
var r4 = $('#tbl2').find('tr:first').children().not(':not(td)');

console.log ("r1: ", r1.length);
console.log ("r2: ", r2.length);
console.log ("r3: ", r3.length);
console.log ("r4: ", r4.length);

输出：

"r1: ", 4
"r2: ", 3
"r3: ", 4
"r4: ", 3

【讨论】：