Question

我在我的HTML代码中有这个div（下面标记中最顶层的那个），我试图通过jQuery .children()找到它。由于某种原因，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>

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

为什么这个div似乎对jQuery是不可见的？ .contents()也找不到它。（试试吧。）

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

Answer 1

那是因为标记无效。 div无法成为p元素的子级。 p元素只能有phrasing content。

考虑这个简单的例子：

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

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

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

Answer 2

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

https://jsfiddle.net/xw9Lteww/1/

JS

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

HTML

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

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

2 个答案: