jQuery--遍历关系

最新推荐文章于 2022-08-05 17:21:16 发布

张0x0

最新推荐文章于 2022-08-05 17:21:16 发布

阅读量315

点赞数 1

分类专栏： web前端基础学习 JavaScript学习文章标签：前端 javascript jquery

本文链接：https://blog.csdn.net/zxn200125/article/details/121869284

版权

web前端基础学习同时被 2 个专栏收录

80 篇文章 3 订阅

订阅专栏

JavaScript学习

37 篇文章 0 订阅

订阅专栏

遍历

jQuery遍历，就是根据相对其他元素关系来查找HTML元素，或者我们可以这么形容，就是根据关系树进行查询。我们可以看看下面这一个代码的结构：

    <div>
        <ul>
            <li>
                <span></span>
                <span></span>
            </li>
            <li>
                <h5></h5>
            </li>
        </ul>
    </div>

作结构图如下：

上图中，这个结构就是一个关系树，其中元素之间的关系分为：“祖先”，“子孙”，“同胞”。拿上例来说：

1.<div>元素是<ul>父元素，是除它之外所有内容的祖先元素

2.<ul>元素是<li>元素的父元素(也可称之祖先元素)，是<span>元素的祖先元素，是<div>元素的子元素，两个<li>之间是同胞元素

3.左边的两个<span>元素之间是同胞元素，是<li>的子元素，是<ul>和<div>的后代元素，需要注意的是只有拥有相同父元素的元素才是同胞元素！

4.右边的<h5>元素是<li>的子元素，是<ul>和<div>的后代元素

知道了这些关系，我们接下来就可以知道怎么上下获取元素。

祖先元素

在这里，我们将祖先元素范围扩大，包括父、祖父、曾祖父以及向上更多等等。

●$(selector).parent()：获取被选元素的直接父元素

●$(selector).parents()：获取被选元素的所有祖先元素

●$(selector1).parentsUntil(selector2)：获取介于两个给定元素之间的所有祖先元素

我们可以通过代码测试来看看三者的区别，以上面的结构为例，为了效果更佳明显，我们将html和css代码写成下列格式：

<style>
    .ancestors{
        display: block;
        border: 1px solid;
        padding: 5px;
        width: 400px;
    }
</style>
<body class="ancestors">body(曾曾祖父元素)
    <div> div(曾祖父元素)
        <ul> ul(祖父元素)
            <li> li(父元素)
                <span id="span1">span(子元素)</span> 
                <span id="span2">span(子元素)</span> 
            </li>
            <li>
                <h5>h5(子元素)</h5> 
            </li>
        </ul>
    </div>
</body>

所以初始状态如下所示：

获取被选元素的直接父元素

接下来，获取<span>元素的直接父元素

    <script>
        $(function(){
            $('span').parent().css({'color':'red','border':'2px solid green'});
        })
    </script>

页面效果如下所示，获取到了<span>元素的直接父元素<li>

获取被选元素的所有祖先元素

同样，以<span>元素为例，获取<span>元素的所有祖先元素

    <script>
        $(function(){
            $('span').parents().css({'color':'red','border':'2px solid green'});
        })
    </script>

页面效果如下所示：

我们可以发现，被选元素的所有祖先元素，最顶端是文档的根元素<html>

获取介于两个给定元素之间的所有祖先元素

这里实则是限定了能获取到的祖先元素最顶端。这里我们依然以<span>元素为例，我们获取<span>元素和<div>元素之间的所有祖先元素：

    <script>
        $(function(){
            $('span').parentsUntil('div').css({'color':'red','border':'2px solid green'});
        })
    </script>

页面效果如下所示：

显然，获取<span>元素和<div>元素之间的所有祖先元素，是不包括<div>元素的，这一点需要注意。

后代元素

●$(selector).children()：获取被选元素的所有直接子元素

●$(selector).find()：获取被选元素的所有后代元素

获取被选元素的所有直接子元素

这里我们以<div>为例，获取<div>元素的直接子元素

    <script>
        $(function(){
            $('div').children().css({'color':'red','border':'2px solid green'});
        })
    </script>

页面显示效果如下，显然，<div>元素的直接子元素只有<ul>元素

获取被选元素的所有后代元素

使用该方法需要注意，需要填写可选参数来过滤对子元素的搜索，如果是需要获取所有后代，那么填写'*'

    <script>
        $(function(){
            //获取div后代所有span元素
            $('div').find('span').css({'color':'red','border':'2px solid green'});
            //获取div后代所有元素
            // $('div').find('*').css({'color':'red','border':'2px solid green'});
        })
    </script>

不同过滤效果：

同胞元素

●$(selector).siblings()：获取被选元素所有同胞元素

●$(selector).next()：获取被选元素的下一个同胞元素

●$(selector).nextAll()：获取被选元素的所有跟随的同胞元素

●$(selector).nextUntil()：获取介于两个给定参数之间的所有跟随的同胞元素

●$(selector).prev()：获取被选元素的前一个同胞元素

●$(selector).prevAll()：获取被选元素的所有之前的同胞元素

●$(selector).prevUntil()：获取介于两个给定参数之间的所有之前的同胞

我们在第一个<li>元素中再添加两个<span>元素，并扩大<body>宽度，对上述元素功能进行测试：

    <script>
        $(function(){
            //获取第二个span元素的同胞元素
            $('span:eq(1)').siblings().css({'color':'red','border':'2px solid green'});
            // 获取第二个span元素的下一个同胞元素
            $('span:eq(1)').next().css({'color':'red','border':'2px solid green'});
            // 获取第二个span元素的所有跟随同胞元素
            $('span:eq(1)').nextAll().css({'color':'red','border':'2px solid green'});
            // 获取第一个span元素和最后一个span元素的所有跟随同胞元素
            $('span:first').nextUntil('span:last').css({'color':'red','border':'2px solid green'});
            // 获取第三个span元素的前一个同胞元素
            $('span:eq(2)').prev().css({'color':'red','border':'2px solid green'});
            // 获取第三个span元素的所有之前的同胞元素
            $('span:eq(2)').prevAll().css({'color':'red','border':'2px solid green'});
            // 获取第三个span元素和第一个元素的所有之前的同胞元素
            $('span:eq(2)').prevUntil('span:first').css({'color':'red','border':'2px solid green'});
        })
    </script>

页面测试结果汇总如下，可见选择元素都是不包括边界的