jQuery选择器删除满足两个条件的表行

Posted 2023-05-09

【中文标题】jQuery选择器删除满足两个条件的表行

【英文标题】：jQuery Selectors Removing table rows that meet two conditions

【发布时间】：2017-02-23 00:33:07

【问题描述】：

我试图了解当您的操作仅在 jQuery 中满足多个条件时运行时采用了哪些技术。我不知道过滤器是否是答案。

在我的示例中，我在一个页面上有多个表。我想删除满足两个条件的表行。第一个条件是该行不能是表的第一行（表元素的第一个子元素）。第二个条件是该行不得应用任何样式（未声明样式元素）。我对复杂选择器的符号感到困惑。我现在正在尝试超越简单的选择器。

在我的示例中，要使用的表标记为 gvBigTable。我有以下内容：

$("#gvBigTable table tbody tr.not('style')").remove();
$("#gvBigTable table tbody tr.not(first-child)".remove();

我想结合这些条件，以便必须同时满足这两个条件才能删除该行。任何帮助表示赞赏。谢谢。

【问题讨论】：

你可以用一个选择器满足这些规则（如果你接受display: none代替.remove()，几乎可以在纯CSS中实现要求）：#gvBigTable table tbody tr:first-child ~ tr:not([style]) display: none;

【参考方案1】：

你没有正确使用:not()。你可以像下面那样做。

$("table tbody tr:not(':first-child'):not('[style]')").remove();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tbody>
        <tr>
            <td>111</td>
        </tr>
        <tr>
            <td>222</td>
        </tr>
        <tr style="">
            <td>333</td>
        </tr>
        <tr>
            <td>444</td>
        </tr>
    </tbody>
</table>

更新：根据David Thomas的建议，纯CSS解决方案如下。

table tbody tr:first-child ~ tr:not([style])  
    display: none; 

<table>
  <tbody>
    <tr>
      <td>111</td>
    </tr>
    <tr>
      <td>222</td>
    </tr>
    <tr style="">
      <td>333</td>
    </tr>
    <tr>
      <td>444</td>
    </tr>
  </tbody>
</table>

如果您不想使用display: none，那么您可以使用带有jQuery 的选择器table tbody tr:first-child ~ tr:not([style]) 来删除行。

【讨论】：

谢谢。因此，按照我阅读此语句的方式，选择器的链接就像一个 AND 语句。如果我想要一个 OR 语句，这个逻辑会如何变化？条件之间要加逗号吗？

是的，像$("table tbody tr:not(':first-child'), table tbody tr:not('[style]')")一样放置逗号。 @船长

这个问题不值得再添加一个答案，您介意阅读我的comment to the question 并更新您的答案吗？

非常感谢，我回到电脑前并在您的回答中添加了一个 sn-p 作为概念验证。 :) 我知道这是你的答案，但是从片段中删除 CSS 会使片段不起作用，所以如果它的添加冒犯了你，你可能想删除整个东西？

没有冒犯我。那是我的错误。 CSS 被添加了两次，一次是在 sn-p 中，一次是在 sn-p 的另一侧。我错误地删除了 sn-p 的 CSS 而不是其他的。 @大卫托马斯