子元素的遍历

最新推荐文章于 2023-09-12 16:25:10 发布

weixin_34151004

最新推荐文章于 2023-09-12 16:25:10 发布

阅读量91

点赞数

CC 4.0 BY-SA版权

文章标签： python

原文链接：https://my.oschina.net/u/933915/blog/363957

本文深入探讨了jQuery的children方法及其使用，同时展示了如何通过自定义函数来模拟children方法的功能，通过HTML代码展示实际应用案例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

1、$.each方法（第一个参数作为内容元素）

$("#test1").click(function(){ $('.level-2').children().each(function(i,ele){ $('div').append('<li>jQuery.children方法,子元素的className为:'+ ele.className + '</li>') }) })

$("#test2").click(function() { function sibling(n, elem) { var matched = []; for (; n; n = n.nextSibling) { //如果存在下一个兄弟节点 if (n.nodeType === 1 && n !== elem) { //是元素节点，且不是当前选择器元素 matched.push(n); } } return matched; }

var ul = document.querySelectorAll('.level-2')[0];

//遍历所有元素 $.each(sibling(ul.firstChild), function(i, ele) { $('div').append('<li>模拟children方法,子元素的className为:' + ele.className + '</li>') }) })

代码调试的结果：

》document.querySelectorAll('.level-2')[0].firstChild 》#text

#text的下一个节点就是子节点

HTML代码（树结构）：

<!-- lang: html -->
<button id="test1">jQuery children方法</button>
<!-- lang: html -->
<button id="test2">模拟children方法</button>
<!-- lang: html -->

<!-- lang: html -->
<div></div>
<!-- lang: html -->

<!-- lang: html -->
<ul class="level-1">
<!-- lang: html -->
    <li class="item-i">I</li>
<!-- lang: html -->
    <li class="item-ii">II
<!-- lang: html -->
        <ul class="level-2">
<!-- lang: html -->
            <li class="item-a">A</li>
<!-- lang: html -->
            <li class="item-b">B
<!-- lang: html -->
                <ul class="level-3">
<!-- lang: html -->
                    <li class="item-1">1</li>
<!-- lang: html -->
                    <li class="item-2">2</li>
<!-- lang: html -->
                    <li class="item-3">3</li>
<!-- lang: html -->
                </ul>
<!-- lang: html -->
            </li>
<!-- lang: html -->
            <li class="item-c">C</li>
<!-- lang: html -->
        </ul>
<!-- lang: html -->
    </li>
<!-- lang: html -->
    <li class="item-iii">III</li>
<!-- lang: html -->
</ul>

转载于:https://my.oschina.net/u/933915/blog/363957