仅获取 javascript 或 jquery 中类型的第一级子级答案

【问题标题】：Get only the first level children of type in javascript or jquery仅获取 javascript 或 jquery 中类型的第一级子级
【发布时间】：2021-07-05 20:17:35
【问题描述】：

我有以下html结构：

    <div class="tab-content">
        <div><p>First tab content</p></div>
        <div><p>Second tab content</p></div>
        <div><p>Third tab content</p><br />
            <div class="myvideos">
                <iframe src="http://www.youtube.com/embed/YWD2Z14w99Y"></iframe>
            </div>
        </div>
    </div>

并正在使用以下内容获取所有选项卡内容 div：

$('.tab-content div').hide();

我希望 jQuery 函数只获取 "tab-content" 中的第一个子元素。 澄清 - 我只想要第一个 Child div 一代人，而不是他们的孩子

即。请注意，第三个选项卡内容有第二个子 div 正在被拾取，我想忽略它。我也尝试了以下方法，但它们似乎不起作用：

 $('.tab-content > div').hide();

 $('.tab-content div:first-of-type').hide();

有没有办法只获取第一个子 div？这可以使用 jQuery 或 Vanilla JS。

【问题讨论】：

使用:first 或.first()。另请阅读 jQuery 文档。
@John 我需要类型的第一级孩子，而不仅仅是第一个孩子。这不起作用：$('.tab-content div').first().hide();，这也不起作用 $('.tab-content div:first').hide();
@John 这是 jsfiddle：jsfiddle.net/jnapier84/sargqozu/3 我正在尝试隐藏除第一个选项卡之外的所有选项卡，但 youtube 视频（在子 div 内）仍然可见，因此我不这样做想要找到链中的所有“div”，只有第一个子 div。
隐藏元素内的元素也被隐藏。听起来您的要求是不可能的，或者您没有正确解释这一点
@charlietfl jsfiddle 有标签。在文档加载时，所有选项卡
都被选中然后隐藏，然后显示第一个
（作为默认的活动选项卡）。在其中一个 div 中是另一个 div，我希望在选择 div 时忽略它。只应选择 FIRST LEVEL CHILDREN，而不是子子级。查看包含 iframe 的选项卡。它有一个我需要忽略的嵌套 div。我希望这是有道理的。

标签： javascript jquery children getelementsbytagname

【解决方案1】：

试试这个

jQuery(".tab-content &gt; div").first().hide();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tab-content">
        <div><p>First tab content</p></div>
        <div><p>Second tab content</p></div>
        <div><p>Third tab content</p><br />
            <div class="myvideos">
                <iframe src="http://www.youtube.com/embed/YWD2Z14w99Y"></iframe>
            </div>
        </div>
    </div>

【讨论】：

这不起作用 - 请参阅 jsfiddle。它不会隐藏标签内容：jsfiddle.net/jnapier84/sargqozu/4
因为你在第一个元素上再次使用了 show.. $('.tab-content div:first').show();从第 #7 行的代码中删除此链接

【解决方案2】：

Vanilla JS 解决方案可能如下所示：

document.querySelector(".tab-content").children[0].style.visibility = "hidden"

【讨论】：

【解决方案3】：

$('.tab-content div:first-child').hide(); 是解决方案

【讨论】：

这似乎不起作用 - 你能检查我的 jsfiddle：jsfiddle.net/jnapier84/sargqozu/3
您试图隐藏第 3 行中的元素，但在第 5 行中它再次显示。

【解决方案4】：

原来这确实解决了它：

$(".tab-content > div").hide();

【讨论】：