jQuery 遍历

一、遍历大体分三种情况：遍历祖先、后代、同辈

1）、遍历祖先用到的方法：

1、parent()：返回距离指定元素最近的也是直接的父级元素。即父元素

2、parents()：返回指定元素的所有父级元素。即父元素、祖父元素、曾祖父元素

3、parents(” 元素名 “)：返回指定元素的父级元素中指定的父级元素

　　4、parentsUntil()：返回介于给定两个元素之间的所有父级元素。即返回的父级元素中有很多个，但是只返回其中一部分而不是全部。

2）、遍历后代用到的方法：

1、children()：返回指定元素的所有子集元素，即靠近指定元素最近的子集元素，而不是所有子集元素

　　2、find(" 元素名 ")：返回指定元素指定的后代元素。

　　3、find(" * ")：返回指定元素的所有后代元素。切忌没有 findAll() 这种方法的说法

3）、遍历同辈用到的方法：

　　1、siblings()：返回指定元素的所有同辈元素

　　2、siblings(" 元素名 ")：返回指定元素的同辈元素中指定的元素。

　　3、next()：返回指定元素的同辈元素中的后面一个（紧跟着的）。返回值只有一个

　　4、nextAll()：返回指定元素的同辈元素中所有同辈元素。

　　5、nextUntil()：返回指定的两个同辈元素中间的所有同辈元素。

　　6、prev()：回指定元素的紧挨着的前面一个同辈元素

　　7、 prevAll()：返回指定元素的所有前面的同辈元素

　　8、prevUntil()：返回指定元素的同辈元素的前面的所有元素。

二、html源码部分

<body class="ancestors">body (曾曾祖父元素)<div style="width:500px;">div (曾祖父元素)    <ul>ul (祖父元素)        <li class="demo">li (父元素)            <span>span</span>            <b>b b</b>            <i>i</i>            <p>pp</p>            <div class="box">div</div>        </li>    </ul></div><div style="width:500px;">div (曾祖父元素)    <ul>ul (祖父元素)        <li>li (父元素)            <span>span</span>        </li>    </ul></div></body></body>

三、js部分：

1、遍历祖先：

   <script>        //        遍历祖先                $(document).ready(function(){        //      parent是指距离最近的即直接的父级元素；parents是指所有的父级包括祖父，曾祖父，曾曾祖父                    $("span").parents().css({"color":"red","border":"1px solid red"});

        //          返回span的所有祖先，且是ul                    $("span").parents("ul").css({"color":"blue","border":"1px solid blue"})

        //            返回介于给定的两个元素之间的所有父级元素                    $("span").parentsUntil("div").css({"color":"green","border":"1px solid green"});

                });

              </script>

2、遍历后代：

<script>    //遍历后代            $(document).ready(function(){    //            children() 方法返回被选元素的所有直接子元素。即靠近div最近的元素不是所有子元素                $("div").children().css({"color":"red"});

    //            返回类名为 "demo" 的所有 <li> 元素，并且它们是 <ul> 的直接子元素：                $("ul").children("li.demo").css({"color":"green"});

    //            find() 方法返回指定元素的指定的后代元素                $("div").find("span").css({"color":"blue"});

    //            find(“*”) 方法返回所有的后代元素                $("div").find("*").css({"color":"yellow"});            });</script>

3、遍历同辈：

 <script>        //遍历同胞        $(document).ready(function () {            //siblings()方法 ：返回指定元素的所有同辈元素            $("i").siblings().css({"color": "red"});

//            返回属于 <i> 的同胞元素中所有 <span> 元素：            $("i").siblings("span").css({"color": "blue"});

//            next() 方法:返回指定元素的同辈元素中的后面一个（紧跟着的）。            $("i").next().css({"color": "#f0f"});

//            nextAll() 方法返回指定元素的所有跟随的同辈元素。               $("span").nextAll().css({"color": "#f00f"});

//            nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。            $("span").nextUntil("p").css({"color": "#00c6ff"});

//            prev()方法返回指定元素的紧挨着的前面一个同辈元素            $("p").prev().css({"color":"green"});

//            prevAll()方法返回指定元素的所有前面的同辈元素            $("div").prevAll().css({"color":"blue"});

//            prevUntil()方法:返回指定元素的同辈元素的前面的所有元素            $(".box").prevUntil().css({"color":"yellow"});        });    </script>

转载于:https://www.cnblogs.com/LindaBlog/p/9212606.html

jQuery 遍历相关推荐

jquery遍历json与数组方法总结each()
在jquery中遍历数组或json数组我们使用最多的方法是each这个函数了或使用foreach,for也是可以实现的,下面我来给大家详细介绍jquery遍历json与数组实现. 代码如下复制代码先 ...
jQuery遍历之next()、nextAll()方法使用实例
jquery遍历:next()和nextAll()方法.实例如下: 复制代码代码如下: <html> <head> <script type="text/ja ...
jquery遍历集合数组标签
jquery遍历集合&数组的两种方式 CreateTime--2017年4月24日08:31:49 Author:Marydon 方法一: $(function(){$("input ...
jQuery 遍历 - closest() 方法
jQuery 遍历参考手册实例本例演示如何通过 closest() 完成事件委托.当被最接近的列表元素或其子后代元素被点击时,会切换黄色背景: $( document ).bind("c ...
jQuery 遍历 (each、map)
jQuery 遍历,意为"移动",用于根据其相对于其他元素的关系来"查找"(或选取)HTML 元素.以某项选择开始,并沿着这个选择移动,直到抵达您期望的元素为止 ...
jQuery 遍历方法
jQuery 遍历方法方法描述 add() 把元素添加到匹配元素的集合中 addBack() 把之前的元素集添加到当前集合中 andSelf() 在版本 1.8 中被废弃.addBack() 的别 ...
jQuery遍历(1)
jQuery 遍历,意为"移动",用于根据其相对于其他元素的关系来"查找"(或选取)HTML 元素.以某项选择开始,并沿着这个选择移动,直到抵达您期望的元素为止 ...
jQuery遍历，数组，集合
使用了jquery有段时间了,整理下jquery中的遍历问题. 1.jquery 遍历对象 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Tr ...
JQuery：JQuery遍历详解
JQuery:遍历一.什么是遍历? jQuery 遍历,意为"移动",用于根据其相对于其他元素的关系来"查找"(或选取)HTML 元素.以某项选择开始,并沿着 ...
php父子遍历,jQuery 遍历
jQuery 遍历 parent() 方法实例查找每个段落的带有 "selected" 类的父元素: $("p").parent(".select ...

jQuery 遍历

jQuery 遍历相关推荐

最新文章

热门文章