Question

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

结果是每个div的id为5个警报

但是当我用

时

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

工作正常吗？

Answer 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级子级别的提醒。

Answer 2

div不能是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>

你应该得到预期的结果！

Answer 3

由于您的HTML结构不正确，因此填充了您的结构：

Populated structure

Answer 4

.find（）方法只沿DOM树向下移动一个级别。

Here你可以找到它。

.find（）和.children（）方法类似，只是.find（）方法只沿DOM树向下移动一层。

Jquery查找和每个选择器

4 个答案: