[第七季]11.遍历元素的父辈和祖先

最新推荐文章于 2023-09-17 15:01:16 发布

低调的嚣张的程序员

最新推荐文章于 2023-09-17 15:01:16 发布

阅读量263

点赞数

分类专栏： 009 JQuery

本文链接：https://blog.csdn.net/zeephom/article/details/77322944

版权

009 JQuery 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

4.复习笔记(这个就是课后习题以及课程所呈现的需求)

(1)父元素获取
(2)parents()遍历器的使用
(3)parentsUntil()遍历器使用

5.自测代码

2.课堂笔记

(1)父元素获取
<script type="text/javascript">
    $(function()
    {
        $(":button").click(function()
        {
            $("#info").html($("#a4").parent().attr("id"));
        });
    });
</script>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>

    <button id="btn">测试</button><div id="info">尼玛</div>
    <div id="a1">
        <div id="a2">
            <div id="a3">
                <div id="a4">
                </div>
            </div>
        </div>
    </div>
</body>
</html>
//注意JQuery
(2)parents()遍历器的使用
<script type="text/javascript" src="../../BK002 Jquery/jquery.js"></script>
<script type="text/javascript">
    $(function()
    {
        $(":button").click(function()
        {
            //$("#info").html($("#a4").parent().attr("id"));
            $("#a4").parents().each(function(i,e)
            {
                $("#info").html($("#info").html()+"第"+i+"个祖先"+$(e).attr("id"));
        上面那一句$(this).attr("id")也可以//
            });;
        });
    });
</script>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>

    <button id="btn">测试</button><div id="info">尼玛</div>
    <div id="a1">
        <div id="a2">
            <div id="a3">
                <div id="a4">
                </div>
            </div>
        </div>
    </div>
</body>
</html>
(3)parentsUntil()遍历器使用
在(2)的程序基础上修改完成如下
$(function()
    {
        $(":button").click(function()
        {
            //$("#info").html($("#a4").parent().attr("id"));
            $("#a4").parentsUntil("body").each(function(i,e)
            {
                $("#info").html($("#info").html()+"第"+i+"个祖先"+$(e).attr("id"));
            });;
        });
    });
</script>

3.课程效果图

这里写图片描述

1.代码

低调的嚣张的程序员

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
[第七季]11.遍历元素的父辈和祖先

4.复习笔记(这个就是课后习题以及课程所呈现的需求)(1)父元素获取 (2)parents()遍历器的使用 (3)parentsUntil()遍历器使用5.自测代码2.课堂笔记(1)父元素获取<script type="text/javascript"> $(function() { $(":button").click(function() {
复制链接

扫一扫