jquery 也不包含隐藏内容答案

【问题标题】：jquery not contains hiding ths toojquery 也不包含隐藏内容
【发布时间】：2016-01-21 11:52:09
【问题描述】：

我隐藏了所有不包含单词的TRs。但是 jquery 也隐藏了THs。

我该如何解决这个问题？

$(window).load(function() {
    $("#check_box").click(function(){
        $( "tr:not(:contains('Foo'))" ).toggle();
    });
});

<table id="gradient-style" summary="LMS">
            <thead>
                <th scope="col">Тема</th>
                <th scope="col">Дата на създаване</th>
                <th scope="col">Разрешаване на проблема</th>
            </thead>
            <tbody><tr><td><a href="ticket.php?id=19">вдигане на скорост</td><td>21.01.2016</td><td>Неразрешен</a></td></tr><tr><td><a href="ticket.php?id=20">задача за стойчо</td><td>21.01.2016</td><td>Неразрешен</a></td></tr><tr><td><a href="ticket.php?id=21">Много ни е студено и нямаме дрехи :(</td><td>21.01.2016</td><td>Неразрешен</a></td></tr><tr><td><a href="ticket.php?id=273">Прибиране у-ва д-р Хюс</td><td>21.01.2016</td><td>Неразрешен</a></td></tr><tr><td><a href="ticket.php?id=275">Прибиране у-ва Шумен</td><td>21.01.2016</td><td>Неразрешен</a></td></tr><tr><td><a href="ticket.php?id=290">Прибиране у-ва Договор Черенча</td><td>21.01.2016</td><td>Неразрешен</a></td></tr><tr><td><a href="ticket.php?id=291">Прибиране у-ва Договор Лятно</td><td>21.01.2016</td><td>Неразрешен</a></td></tr><tr><td><a href="ticket.php?id=371">Лош Сигнал - Велино</td><td>21.01.2016</td><td>Неразрешен</a></td></tr><tr><td><a href="ticket.php?id=390">ресетвачка за мътница </td><td>21.01.2016</td><td>Неразрешен</a></td></tr><tr><td><a href="ticket.php?id=440">Манастир Царевброд</td><td>21.01.2016</td><td>Неразрешен</a></td></tr></tbody></table>

【问题讨论】：

请显示 HTML。此外，切换不仅会隐藏，还会显示。不清楚这是否相关
是的，我使用复选框来显示/隐藏它们，但它也隐藏了我的 ths 我用 html 代码更新了第一篇文章
当然会。 ths 也是 tr 的孩子。
我怎样才能绕过这个？
请注意，您示例中的所有锚点在每个 </a> 中都没有关闭 TD，因此 HTML 无效

标签： jquery contains

【解决方案1】：

您可以使用上下文来过滤 trs，在您的情况下为 tbody：

$( "tbody tr:not(:contains('Foo'))" ).toggle();

【讨论】：

您以第一个“tbody”回答 +1 进入。

【解决方案2】：

您的代码有效，只需检查 td

中的附件

检查此修复DEMO

Javascript：

$(window).load(function() {
    $("#check_box").click(function(){
        $("tbody tr:not(:contains('Foo'))").toggle();
    });
});

HTML：

<table id="gradient-style" summary="LMS">
    <thead>
        <tr>
            <th scope="col">Тема</th>
            <th scope="col">Дата на създаване</th>
            <th scope="col">Разрешаване на проблема</th>
        </tr>
    </thead>
    <tbody>
    <tr>
        <td><a href="ticket.php?id=19">вдигане на скорост</a></td>
        <td>21.01.2016</td>
        <td>Неразрешен</td>
    </tr>
    <tr>
        <td><a href="ticket.php?id=20">задача за стойчо</a></td>
        <td>21.01.2016</td>
        <td>Неразрешен</td>
    </tr>
    <tr>
        <td><a href="ticket.php?id=21">Много ни е студено и нямаме дрехи :(</a></td>
        <td>21.01.2016</td>
        <td>Неразрешен</td>
    </tr>
    <tr>
        <td><a href="ticket.php?id=273">Прибиране у-ва д-р Хюс</a></td>
        <td>21.01.2016</td>
        <td>Неразрешен</td>
    </tr>
    <tr>
        <td><a href="ticket.php?id=275">Прибиране у-ва Шумен</a></td>
        <td>21.01.2016</td>
        <td>Неразрешен</td>
    </tr>
    <tr>
        <td><a href="ticket.php?id=290">Прибиране у-ва Договор Черенча</a></td>
        <td>21.01.2016</td>
        <td>Неразрешен</td>
    </tr>
    <tr>
        <td><a href="ticket.php?id=291">Прибиране у-ва Договор Лятно</a></td>
        <td>21.01.2016</td>
        <td>Неразрешен</td>
    </tr>
    <tr>
        <td><a href="ticket.php?id=371">Лош Сигнал - Велино</a></td>
        <td>21.01.2016</td>
        <td>Неразрешен</td>
    </tr>
    <tr>
        <td><a href="ticket.php?id=390">ресетвачка за мътница </a></td>
        <td>21.01.2016</td>
        <td>Неразрешен</td>
    </tr>
    <tr>
        <td><a href="ticket.php?id=440">Манастир Царевброд</a></td>
        <td>21.01.2016</td>
        <td>Неразрешен</td>
    </tr>
    </tbody>
</table>

【讨论】：

这仍然针对标题。我让它更明显：jsfiddle.net/fh5fgceu/1
@TrueBlueAussie 你是对的！我已经确定了答案。
是的。现在和其他几个答案一样。他们都假设TH 正确放置在THEAD 中（通常情况并非如此）。但这现在也可以了。

【解决方案3】：

您正在选择所有tr。选择tbody下的tr，如下所示。

$("tbody tr:not(:contains('Foo'))" ).toggle();

【讨论】：

【解决方案4】：

$(window).load(function() {
    $("tr>td").hide();
    $("tr>td:contains('test')").show();
});

试试上面的代码。

【讨论】：

不幸的是，这隐藏/显示了TDs 而不是TRs :(

【解决方案5】：

我隐藏了所有不包含单词的 TR。但是jquery是隐藏的 TH也是。

那是因为th 也是tr 的孩子。虽然您没有将th 包裹在tr 中，但浏览器会为您尝试纠正错误。

另一种方法（除了其他一些答案）可以做你想做的事情，可能是得到td的父级。

$("#chk").on('change', function() {
	$("td:not(:contains('one'))").parent().toggle();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label><input type="checkbox" id="chk">Show/Hide Twos</label>
<hr>
<table>
	<thead><tr><th>two</th><th>two</th></tr></thead>
	<tbody>
		<tr><td>one</td><td>one</td></tr>
		<tr><td>two</td><td>two</td></tr>
	</tbody>
</table>

【讨论】：

【解决方案6】：

添加:has(td)

$("tr:not(:contains('Foo')):has(td)" ).toggle();

JSFiddle： https://jsfiddle.net/0L4fs4jr/3/

注意：

大多数其他有效答案建议定位TBODY，但我通常会发现TH 在TBODY 中的页面。这在任何一种情况下都有效。

【讨论】：

【解决方案7】：

只需使用 $( "tbody tr:not(:contains('Foo'))" ).toggle();

【讨论】：

已经有 2 个答案可以做同样的事情。你要添加什么？