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

【问题标题】：jQuery: How hide everything in a div except 2 certain elementsjQuery：如何隐藏除 2 个特定元素之外的 div 中的所有内容
【发布时间】：2017-03-07 10:54:48
【问题描述】：

我有以下 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 元素内，但我也希望隐藏此文本。我绝对需要使用隐藏命令（因为进一步的限制）。如何修改我的 jQuery 代码？

【问题讨论】：

为什么不直接隐藏所有内容，然后再次显示这两个元素？
对不起，代码是 $('firstclass.secondclass :not(intro, button)').hide()
我不想在开始时隐藏所有内容，因为我希望谷歌能够阅读内容。同样隐藏所有内容并在之后再次显示某些元素可能会导致屏幕闪烁
它不会导致闪烁，因为布局不是在脚本终止之前完成的
使用 .filter() 怎么样？ api.jquery.com/filter

标签： javascript jquery jquery-selectors show-hide

【解决方案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")")

【讨论】：

$('.firstclass.secondclass').children(':not(intro, button)').hide() 有效，但只有没有周围 p 的介绍和按钮元素被隐藏。并且没有被 p 元素包围的文本仍然没有隐藏。
为什么不把所有要隐藏的内容放到某个东西中，也许是一个div，然后隐藏那个div？

【解决方案2】：

<!DOCTYPE html>

$(document).ready(function(){
  var htmlString = $(".firstclass").html(); 
  var data=''; var getthis='';
 $(".firstclass").find(":button, intro").each(function () {
var getthis = $( this ).html();
data += getthis;	            
});
$(".firstclass").html( data );
});

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>

<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>

</body>
</html>

这是第一个介绍...

按钮 1

这是第一个文本段落

这是第二个介绍......

按钮 2

这是第二段文字

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

元素

经过测试的代码运行良好，希望对您有所帮助。

【讨论】：