Javascript jQuery：如何隐藏div中除2个特定元素之外的所有内容_Javascript_Jquery_Jquery Selectors_Show Hide

Javascript jQuery：如何隐藏div中除2个特定元素之外的所有内容

javascript jquery

Javascript jQuery：如何隐藏div中除2个特定元素之外的所有内容,javascript,jquery,jquery-selectors,show-hide,Javascript,Jquery,Jquery Selectors,Show Hide,我有以下HTML代码： <div> <div class="firstclass secondclass"> <intro><p>This is the first intro...</p></intro> <p><button>Button 1</button></p> <p>This is the fir

我有以下HTML代码：

<div>
    <div class="firstclass secondclass">

        <intro><p>This is the first intro...</p></intro>
        <p><button>Button 1</button></p>
        <p>This is the first text paragraph</p>

        <intro><p>This is the second intro...</p></intro>
        <button>Button 2</button>
        <p>This is the second text paragraph</p>
        This is another text paragraph, but without the <p> element

    </div>
</div

我正在尝试以下代码：

$('div.item_desc.custom_content :not(intro, button)').hide()

我得到的是：

This is another text paragraph, but without the <p> element

这是另一个文本段落，但没有元素

我正在使用自定义的intro标记进行进一步处理。请注意，按钮元素一次位于p元素内，另一次不在p元素内。另外，文本的一部分不在p元素内，但我也希望隐藏此文本。我确实需要使用hide命令（由于进一步的限制）。如何修改my jQuery代码？

未测试：

$('div.item_desc.custom_content').children("intro:not(:first), p:not(:eq(0)), p:not(:eq(1))")

但是，一个更简单的解决方案是创建一个类

alwaysshown

<div>
    <div class="firstclass secondclass">

        <intro class="alwaysshown"><p>This is the first intro...</p></intro>
        <p class="alwaysshown"><button>Button 1</button></p>
        <p class="alwaysshown">This is the first text paragraph</p>

        <intro><p>This is the second intro...</p></intro>
        <button>Button 2</button>
        <p>This is the second text paragraph</p>
        This is another text paragraph, but without the <p> element

    </div>
</div>

未经测试：

$('div.item_desc.custom_content').children("intro:not(:first), p:not(:eq(0)), p:not(:eq(1))")

但是，一个更简单的解决方案是创建一个类

alwaysshown

<div>
    <div class="firstclass secondclass">

        <intro class="alwaysshown"><p>This is the first intro...</p></intro>
        <p class="alwaysshown"><button>Button 1</button></p>
        <p class="alwaysshown">This is the first text paragraph</p>

        <intro><p>This is the second intro...</p></intro>
        <button>Button 2</button>
        <p>This is the second text paragraph</p>
        This is another text paragraph, but without the <p> element

    </div>
</div>


这是第一个介绍
按钮1
这是第一段文字
这是第二个介绍
按钮2
这是第二段文字
这是另一个文本段落，但没有元素


这是第一个介绍
按钮1
这是第一段文字
这是第二个介绍
按钮2
这是第二段文字
这是另一个文本段落，但没有元素

为什么不隐藏所有内容，然后再次显示这两个元素？对不起，代码是$（'firstclass.secondclass:not（intro，button）'）。hide（）我不想在一开始就隐藏所有内容，因为我希望谷歌能够读取内容。此外，隐藏所有内容并在之后再次显示某些元素可能会导致屏幕闪烁。这不会导致屏幕闪烁，因为布局不是在脚本结束之前完成的。如何使用.filter（）？为什么不隐藏所有内容，然后再次显示这两个元素呢？对不起，代码是$（'firstclass.secondclass:not（intro，button'））。hide（）我不想在一开始就隐藏所有内容，因为我希望google能够读取内容。此外，隐藏所有内容并在之后再次显示某些元素可能会导致屏幕闪烁。这不会导致屏幕闪烁，因为布局不是在脚本结束之前完成的。如何使用.filter（）<代码>$（'.firstclass.secondclass'）。子项（':not（intro，button）'））.hide（）起作用，但只有intro和button元素（没有周围的p）被隐藏。此外，没有被p元素包围的文本仍然没有隐藏。为什么不将所有要隐藏的内容放在某个东西中，可能是一个div，然后隐藏该div？

$（'.firstclass.secondclass'）。children（':not（intro，button'））。hide（）

工作，但只有没有包围p的intro und button元素才被隐藏。而且没有被p元素包围的文本仍然没有被隐藏。你为什么不把所有要隐藏的内容放在某个地方，也许是一个div，然后隐藏那个div呢？

<!DOCTYPE html>