jquery find 和每个选择器答案

【问题标题】：Jquery find and each selectorjquery find 和每个选择器
【发布时间】：2014-11-02 11:31:32
【问题描述】：

我是 jQuery 新手，所以请帮助我输出。以下是供参考的HTML代码。

<html>
<body>
    <div id="level1">
        <p>
            <span id="level1.1">
                <div id="level1.1.1"></div>
                <div id="level1.1.2"></div>
            </span>

            <span id="level1.2">
                <div id="level1.2.1"></div>
                <div id="level1.2.2"></div>
            </span>

            <div id="level1.3"></div>
        </p>
    </div>
</body>
</html>

当我使用以下脚本时

<script type="text/javascript">
    $(document).ready(function (){
        var div = $("#level1").find("div").each(function(){
            alert($(this).attr('id'));
        });
    });
</script>

结果是 5 个警报，每个 div 都有 id

但是当我使用时

<script type="text/javascript">
    $(document).ready(function(){
        var div = $("#level1").find("span > div").each(function(){
            alert($(this).attr('id'));
        });
    });
</script>

级别 1.2.1 和 1.2.2 只有两个警报我想知道为什么 1.1.1 和 1.1.2 没有警报，因为它们也有作为父母的跨度？

提前致谢。

如果 div 不能是

的子级

那为什么是

<p>
    <div id="level1">
        <span id="level1.1">
            <div id="level1.1.1"></div>
            <div id="level1.1.2"></div>
        </span>

        <span id="level1.2">
            <div id="level1.2.1"></div>
            <div id="level1.2.2"></div>
        </span>

        <div id="level1.3"></div>
    </div>
</p>

工作正常吗？？

【问题讨论】：

div 不能是span 的孩子
@ArunPJohny 虽然我倾向于同意并补充说 div 也不能是p 标签的子标签，但您对此有什么具体的参考吗？另外为什么后两者是alerted，因为它们也是跨度的孩子？
@RobSchmuecker 看看渲染的 html jsfiddle.net/arunpjohny/0zrfmmcw/2
尝试使用开发者工具查看在浏览器中生成的 HTML。会清晰很多！！！
@RobSchmuecker 我想你可以看看 html4 dtd w3.org/TR/html4/sgml/dtd.html#inline

标签： javascript jquery html css each

【解决方案1】：

因为你的 HTML 不正确。

浏览器将按如下方式生成您的 html。

<p>
    <span id="level1.1">
    </span>
</p>
<div id="level1.1.1"></div>
<div id="level1.1.2"></div>

因为div 不能是p 的子代

如果您删除代码中的第一个 <p>，您将收到 4 个级别子级别的警报。

【讨论】：

谢谢你的意思。当我使用firebug查看HTML时，很清楚

【解决方案2】：

divs 在 HTML 中不能是 p 的子代

使用以下内容更改您的 HTML 标记：

<div id="level1">
    <span id="level1.1">
      <div id="level1.1.1"></div>
      <div id="level1.1.2"></div>
    </span>
    <span id="level1.2">
      <div id="level1.2.1"></div>
      <div id="level1.2.2"></div>
    </span>
    <div id="level1.3"></div>
</div>

你应该会产生预期的结果！

【讨论】：

同意.. div 在 HTML 中不能是 p 的子级，但第二个跨度也是如此，那么为什么它在那里工作？

【解决方案3】：

因为您的 HTML 结构不正确，所以您的结构是如何填充的：

【讨论】：

【解决方案4】：

.find() 方法只在 DOM 树中向下移动一层。

Here你可以找到。

.find() 和 .children() 方法相似，不同之处在于 .find() 方法仅在 DOM 树中向下移动一层。

【讨论】：