jquery - 隐藏div，而不隐藏它的嵌套div

Question

这是一个简单的问题，但我似乎无法在 stackoverflow 上的任何地方找到答案。

我有以下代码片段:

<div>//The div to be hidden
    <div></div>//I don't want to hide this div
    <div></div>//Nor this one
</div>

我想这样做的原因是，当我隐藏 div 时，我使用它们的标记名隐藏它们，但是当我显示它们时，我使用它们的类名。因此，innerdiv 或“嵌套 div”不会再次出现。

例如:

之前:

<div>
    <div></div>
    <div></div>
</div>
<div></div>
<div>
    <div></div>
    <div></div>
</div>

之后:

<div style="display:none;">
    <div></div>
    <div></div>
</div>
<div style="display:none;"></div>
<div style="display:none;">
    <div></div>
    <div></div>
</div>

Answer 1

我假设提供的代码位于另一个元素内。我将称之为 div#root

<div id="root">
    <div>
        <div></div>
        <div></div>
    </div>
    <div></div>
    <div>
        <div></div>
        <div></div>
    </div>
</div>

要隐藏 #root 的所有直接 div 子级，您可以使用选择器 #root > div。

所以，你的 jQuery 可能看起来像 $('#root > div').hide()

这就是你想做的事吗？