Javascript 为什么这个div对jQuery完全不可见？

我有这个div，它是我试图通过jQuery.children查找的HTML代码中下面标记中最上面的一个。出于某种原因，jQuery无法找到它

这可以通过运行以下命令进行测试：

$($('<p class="info-item"><span class="info-item-key">Gender:</span><span class="info-item-value">Male</span><span class="info-item-edit-button">&nbsp;<a class="black-link" href="#"><i class="fa fa-pencil-square"></i></a></span><div class="form-inline info-item-edit-input"><div class="form-group"><div class="input-group"><input type="text" class="form-control" value="" /><div class="input-group-addon"><a class="black-link info-item-edit-save-link"><i class="fa fa-check"></i></a></div></div></div></div></p>')[0]).children()

下面是该代码中包含的相同标记，但格式更好：

<p class="info-item">
    <span class="info-item-key">Gender:</span>
    <span class="info-item-value">Male</span>
    <span class="info-item-edit-button">
        &nbsp;<a class="black-link" href="#"><i class="fa fa-pencil-square"></i></a>
    </span>
    <div class="form-inline info-item-edit-input">
        <div class="form-group">
            <div class="input-group">
                <input type="text" class="form-control" value="" />
                <div class="input-group-addon">
                    <a class="black-link info-item-edit-save-link">
                        <i class="fa fa-check"></i>
                    </a>
                </div>
            </div>
        </div>
    </div>
</p>

对于上下文，我尝试在单击edit按钮时使用jQuery显示编辑表单

这个div对jQuery不可见有什么原因吗。内容也找不到。试试看

---

如果有帮助的话，该div最初是用display:none隐藏在CSS中的，但即使在附加到没有该CSS的文档的JS控制台会话中尝试它，也会导致找不到该div。如果需要，可以在StackOverflow JS控制台或任何其他站点中尝试。

这是因为标记无效。div不能是p元素的子元素。p元素只能具有

考虑这个简单的例子：

$('<p><div></div></p>');

这是我的Chromium浏览器呈现上述标记的方式：

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

---

下面的提琴向您展示了如何访问您正在寻找的div。我在div中添加了一些文本，以便您可以看到警报

JS

HTML

谢谢，将p改为span并将文本位包装为p已经解决了我的问题。

$(document).ready( function() {
   alert($(".form-inline").text()); 
});

<p class="info-item">
<span class="info-item-key">Gender:</span>
<span class="info-item-value">Male</span>
<span class="info-item-edit-button">
    &nbsp;<a class="black-link" href="#"><i class="fa fa-pencil-square"></i></a>
</span>
<div class="form-inline info-item-edit-input">
    hey
    <div class="form-group">
        <div class="input-group">
            <input type="text" class="form-control" value="" />
            <div class="input-group-addon">
                <a class="black-link info-item-edit-save-link">
                    <i class="fa fa-check"></i>
                </a>
            </div>
        </div>
    </div>
</div>
</p>