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

Question

我有以下 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

我想使用 jQuery 得到以下输出:

This is the first intro...
Button 1
This is the second intro...Button 2

我正在尝试这段代码:

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

我得到的是:

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

我正在使用自定义介绍标签进行进一步处理。请注意，按钮元素一次位于 p 元素内，而另一次则不在。另外，部分文本不在 p 元素内，但我也希望隐藏该文本。我确实需要使用 hide 命令(因为有进一步的限制)。我该如何修改我的 jQuery 代码？

Answer 1

未经测试:

$('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(":not("alwaysshown")")