Question

我有一个DOM树，如下所示：

console.log($("table td:not(.customWrap)"));

<script src="https://code.jquery.com/jquery-3.3.1.min.js" ></script>
<table>
  <td class="noWrap">1</td>
  <td class="noWrap">2</td>
  <td class="customWrap">
    <table>
     <tr>
      <td class="noWrap">3</td>
     </tr>
    </table>
  </td>
  <td class="noWrap">4</td>
</table>

我使用选择器$("table td:not(.customWrap)")来获取包含1,2,4的某些节点。

但是使用此选择器，我成功过滤了节点td.customWrap，而不过滤其子节点<td class="noWrap">3<td>。

实际上，我不想获得具有3的节点。

Answer 1

尝试一下：您只需更改$("table td:not(.customWrap * , .customWrap)")

$(function() {
  $("table td:not(.customWrap * , .customWrap)").each(function() {
    console.log($(this).text())
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<table>
  <td class="noWrap">1
    <td>
      <td class="noWrap">2
        <td>
          <td class="customWrap">
            <table>
              <tr>
                <td class="noWrap">3
                  <td>
              </tr>
            </table>
            </td>
            <td class="noWrap">4</td>
</table>

Answer 2

如果只需要第一级，则可以给父表一个标识符，然后在选择器中使用大于号（>），例如：

IEnumerable<csom.PublishedProject> projColl = projContext.LoadQuery(
projContext.Projects.Where(
p => p.Name == projectName)

"#parent_table > tbody > tr > td.noWrap"

console.log( $("#parent_table > tbody > tr > td.noWrap").length + " Items" );
console.log( $("#parent_table > tbody > tr > td.noWrap").text() );
console.log( $("#parent_table > tbody > tr > td.noWrap") );

Answer 3

您可以使用类似这样的内容：

var s = $("table td").filter(function() {
  return $(this).closest('.customWrap').length == 0
});

工作演示

var s = $("table td").filter(function() {
  return $(this).closest('.customWrap').length == 0
});

console.log(s)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td class="noWrap">1</td>
    <td class="noWrap">2</td>
    <td class="customWrap">
      <table>
        <tr>
          <td class="noWrap">3</td>
        </tr>
      </table>
    </td>
    <td class="noWrap">4</td>
  </tr>
</table>

Answer 4

您可以告诉它不返回嵌套表td

请注意，此代码仅在具有1级嵌套表的情况下有效

console.log($("table tr td").not(".customWrap").not("table table tr td").text())

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table id="a">
<tr>
<td class="noWrap">1<td>
<td class="noWrap">2<td>
<td class="customWrap">
  <table >
   <tr>
    <td class="noWrap">3<td>
   </tr>
  </table>
<td>
<td class="noWrap">4<td>
</tr>
</table>

如何忽略特殊的td节点及其整个子节点？

4 个答案: