jQuery（九）：节点遍历

最新推荐文章于 2022-07-12 20:38:21 发布
最新推荐文章于 2022-07-12 20:38:21 发布
阅读量90 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/dotnet261010/p/9736169.html
版权

一、遍历子元素

children()方法可以用来获取元素的所有子元素，语法如下：

 示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>节点遍历演示示例</title>
    <style>
      .hot{
          color: #ff0000;
      }
      a{
          color: #000000;
          text-decoration: none;
      }
    </style>
    <!--引入jQuery-->
    <script src="../jquery-3.3.1.js"></script>
    <!--javascript-->
    <script>
        $(function(){
            // 遍历子节点
            var $body=$("body").children();
            // 输出2 只考虑img和ul元素，不考虑ul里面的li元素
            alert("长度:"+$body.length);
        });
    </script>
</head>
<body>
    <img src="ad.jpg" alt="美梦成真系列抽奖" />
    <ul>
        <li><a href="#">小米的MI 2手机</a></li><span class="hot">火爆销售中</span>
        <li><a href="#">苹果iPad mini</a></li>
        <li><a href="#">三星GALAXY III</a></li>
        <li><a href="#">苹果iPhone 5s</a></li>
    </ul>
</body>
</html>

 

效果：

二、遍历同辈元素

jQuery可以获取紧邻其后、紧邻其前和位于该元素前与后的所有同辈元素，语法如下：

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>节点遍历演示示例</title>
    <style>
      .hot{
          color: #ff0000;
      }
      a{
          color: #000000;
          text-decoration: none;
      }
    </style>
    <!--引入jQuery-->
    <script src="../jquery-3.3.1.js"></script>
    <!--javascript-->
    <script>
        $(function(){
            // 遍历子节点
            //var $body=$("body").children();
            // 输出2 只考虑img和ul元素，不考虑ul里面的li元素
            //alert("长度:"+$body.length);

            // 获取同辈节点
            // 第三个li标签的背景色改变
            $("li:eq(1)").next().css("background-color","green");
            // 第一个li标签的背景色改变
            $("li:eq(1)").prev().css("background-color","#F06");
        });
    </script>
</head>
<body>
    <img src="ad.jpg" alt="美梦成真系列抽奖" />
    <ul>
        <li><a href="#">小米的MI 2手机</a><span class="hot">火爆销售中</span></li>
        <li><a href="#">苹果iPad mini</a></li>
        <li><a href="#">三星GALAXY III</a></li>
        <li><a href="#">苹果iPhone 5s</a></li>
    </ul>
</body>
</html>

 

效果：

siblings()示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>节点遍历演示示例</title>
    <style>
      .hot{
          color: #ff0000;
      }
      a{
          color: #000000;
          text-decoration: none;
      }
    </style>
    <!--引入jQuery-->
    <script src="../jquery-3.3.1.js"></script>
    <!--javascript-->
    <script>
        $(function(){
            // 遍历子节点
            //var $body=$("body").children();
            // 输出2 只考虑img和ul元素，不考虑ul里面的li元素
            //alert("长度:"+$body.length);

            // 获取同辈节点
            // 第三个li标签的背景色改变
            //$("li:eq(1)").next().css("background-color","green");
            // 第一个li标签的背景色改变
            //$("li:eq(1)").prev().css("background-color","#F06");
            // 除了第二个li标签，其它li标签的背景色都改变
            $("li:eq(1)").siblings().css("background-color","green");
        });
    </script>
</head>
<body>
    <img src="ad.jpg" alt="美梦成真系列抽奖" />
    <ul>
        <li><a href="#">小米的MI 2手机</a><span class="hot">火爆销售中</span></li>
        <li><a href="#">苹果iPad mini</a></li>
        <li><a href="#">三星GALAXY III</a></li>
        <li><a href="#">苹果iPhone 5s</a></li>
    </ul>
</body>
</html>

 

效果：

三、遍历前辈元素

jQuery中可以遍历前辈元素，方法如下：

  1. parent()：获取元素的父级元素。
  2. parents()：获取元素的祖先元素。

parent()获取父级元素示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>节点遍历演示示例</title>
    <style>
      .hot{
          color: #ff0000;
      }
      a{
          color: #000000;
          text-decoration: none;
      }
    </style>
    <!--引入jQuery-->
    <script src="../jquery-3.3.1.js"></script>
    <!--javascript-->
    <script>
        $(function(){
            // 遍历子节点
            //var $body=$("body").children();
            // 输出2 只考虑img和ul元素，不考虑ul里面的li元素
            //alert("长度:"+$body.length);

            // 获取同辈节点
            // 第三个li标签的背景色改变
            //$("li:eq(1)").next().css("background-color","green");
            // 第一个li标签的背景色改变
            //$("li:eq(1)").prev().css("background-color","#F06");
            // 除了第二个li标签，其它li标签的背景色都改变
            //$("li:eq(1)").siblings().css("background-color","green");

            // 获取前辈元素
            // 父级ul改变背景色
            $("li:eq(1)").parent().css("background-color","green");
        });
    </script>
</head>
<body>
    <img src="ad.jpg" alt="美梦成真系列抽奖" />
    <ul>
        <li><a href="#">小米的MI 2手机</a><span class="hot">火爆销售中</span></li>
        <li><a href="#">苹果iPad mini</a></li>
        <li><a href="#">三星GALAXY III</a></li>
        <li><a href="#">苹果iPhone 5s</a></li>
    </ul>
</body>
</html>

 

效果：

parents()祖先元素示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>节点遍历演示示例</title>
    <style>
      .hot{
          color: #ff0000;
      }
      a{
          color: #000000;
          text-decoration: none;
      }
    </style>
    <!--引入jQuery-->
    <script src="../jquery-3.3.1.js"></script>
    <!--javascript-->
    <script>
        $(function(){
            // 遍历子节点
            //var $body=$("body").children();
            // 输出2 只考虑img和ul元素，不考虑ul里面的li元素
            //alert("长度:"+$body.length);

            // 获取同辈节点
            // 第三个li标签的背景色改变
            //$("li:eq(1)").next().css("background-color","green");
            // 第一个li标签的背景色改变
            //$("li:eq(1)").prev().css("background-color","#F06");
            // 除了第二个li标签，其它li标签的背景色都改变
            //$("li:eq(1)").siblings().css("background-color","green");

            // 获取前辈元素
            // 父级ul改变背景色
            //$("li:eq(1)").parent().css("background-color","green");
            // 祖先级元素 整个body元素改变背景色
            $("li:eq(1)").parents().css("background-color","green");
        });
    </script>
</head>
<body>
    <img src="ad.jpg" alt="美梦成真系列抽奖" />
    <ul>
        <li><a href="#">小米的MI 2手机</a><span class="hot">火爆销售中</span></li>
        <li><a href="#">苹果iPad mini</a></li>
        <li><a href="#">三星GALAXY III</a></li>
        <li><a href="#">苹果iPhone 5s</a></li>
    </ul>
</body>
</html>

 

效果：

四、其他方法

1、jQuery遍历-each()

以每一个匹配的元素作为上下文来执行一个函数，例如：

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>节点遍历其他方法演示示例</title>
    <style>
      .hot{
          color: #ff0000;
      }
      a{
          color: #000000;
          text-decoration: none;
      }
    </style>
    <!--引入jQuery-->
    <script src="../jquery-3.3.1.js"></script>
    <!--javascript-->
    <script>
        $(function(){
            $("input[type='button']").click(function(){
                // 遍历每一个li元素，弹出li元素的text值
                $("li").each(function(){
                    alert($(this).text());
                });
            });
        });
    </script>
</head>
<body>
    <img src="ad.jpg" alt="1" />
    <img src="ad.jpg" alt="2" />
    <img src="ad.jpg" alt="3" />
    <ul>
        <li><a href="#">小米的MI 2手机</a><span class="hot">火爆销售中</span></li>
        <li><a href="#">苹果iPad mini</a></li>
        <li><a href="#">三星GALAXY III</a></li>
        <li><a href="#">苹果iPhone 5s</a></li>
    </ul>
    <input type="button" value="点击按钮" />
</body>
</html>

 

效果：

示例2：i的含义

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>节点遍历其他方法演示示例</title>
    <style>
      .hot{
          color: #ff0000;
      }
      a{
          color: #000000;
          text-decoration: none;
      }
    </style>
    <!--引入jQuery-->
    <script src="../jquery-3.3.1.js"></script>
    <!--javascript-->
    <script>
        $(function(){
         /*    $("input[type='button']").click(function(){
                // 遍历每一个li元素，弹出li元素的text值
                $("li").each(function(){
                    alert($(this).text());
                });
            }); */
            // i表示图片的索引值，从0开始
            $("img").each(function(i){
                this.alt="test"+i+".jpg";
                console.log(this.alt);
            });
        });
    </script>
</head>
<body>
    <img src="ad.jpg" alt="1" />
    <img src="ad.jpg" alt="2" />
    <img src="ad.jpg" alt="3" />
    <ul>
        <li><a href="#">小米的MI 2手机</a><span class="hot">火爆销售中</span></li>
        <li><a href="#">苹果iPad mini</a></li>
        <li><a href="#">三星GALAXY III</a></li>
        <li><a href="#">苹果iPhone 5s</a></li>
    </ul>
    <input type="button" value="点击按钮" />
</body>
</html>

 

效果：

2、查找方法-find()

搜索所有与指定表达式匹配的元素，例如：

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>节点遍历其他方法演示示例</title>
    <style>
      .hot{
          color: #ff0000;
      }
      a{
          color: #000000;
          text-decoration: none;
      }
    </style>
    <!--引入jQuery-->
    <script src="../jquery-3.3.1.js"></script>
    <!--javascript-->
    <script>
        $(function(){
         /*    $("input[type='button']").click(function(){
                // 遍历每一个li元素，弹出li元素的text值
                $("li").each(function(){
                    alert($(this).text());
                });
            }); */
            // i表示图片的索引值，从0开始
           /*  $("img").each(function(i){
                this.alt="test"+i+".jpg";
                console.log(this.alt);
            }); */

            // 查找方法
            $("li").find("span").css("color","green");
        });
    </script>
</head>
<body>
    <img src="ad.jpg" alt="1" />
    <img src="ad.jpg" alt="2" />
    <img src="ad.jpg" alt="3" />
    <ul>
        <li><a href="#">小米的MI 2手机</a><span class="hot">火爆销售中</span></li>
        <li><a href="#">苹果iPad mini</a></li>
        <li><a href="#">三星GALAXY III</a></li>
        <li><a href="#">苹果iPhone 5s</a></li>
    </ul>
    <input type="button" value="点击按钮" />
</body>
</html>

 

效果：

转载于:https://www.cnblogs.com/dotnet261010/p/9736169.html

bo o ya ka
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
遍历节点
q812258983的博客
11-22 580
遍历节点 1.children方法 用于去的匹配的子元素集合。 children()方法只考虑子元素而不考虑后代元素。 $lis = $('ul').children(); lg($lis); var len = $lis.length; for(var i=0;i lg($lis[i].innerHTML); } 2.next()方法 用于取得匹配元
节点遍历
馨香紫韵
06-06 475
http://www.w3.org/1999/xhtml">                    //next()方法用于获取节点之后挨这的第一个同辈元素。        //$(".menuitem").next("div");        //nextAll()方法用于获取节点之后的所有同辈元素。        //$("menuitem").nextAll("div");       
JQuery中节点遍历方法实例
10-24
主要介绍了JQuery中节点遍历方法,实例分析了jQuery遍历节点的技巧,需要的朋友可以参考下
Jquery节点遍历next与nextAll方法使用示例
10-25
next()方法用于获取“节点之后”挨着它的第一个“同类同辈”元素。nextAll()方法用于获取“节点之后”所有的元素
jQuery遍历节点树方法分析
10-21
主要介绍了jQuery遍历节点树方法,结合实例形式分析了3种常见的节点遍历技巧,需要的朋友可以参考下
jQuery DOM节点的遍历方法小结
10-19
本篇文章主要介绍了jQuery DOM节点的遍历方法小结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
节点遍历相关操作
立业的博客
10-29 117
from lxml import etree root = etree.Element("root") etree.SubElement(root, "child").text = "Child 1" etree.SubElement(root, "child").text = "Child 2" etree.SubElement(root, "another").text = "Child...
java遍历节点_二叉树的节点遍历
weixin_39658318的博客
02-20 159
1、节点类public class Node {private int data;private Node left;private Node right;public Node(int data) {this.data = data;}public int getData() {return data;}public void setData(int data) {this.data = dat...
节点查找以及节点遍历：两种方式
weixin_33961829的博客
05-05 351
遍历节点的方式叫做：API 这里有两个套API 即：HTML元素。 //===========================以下是第一种操作DOM的API，会把空文本节点计算在内。相比下面的第二套API兼容性会好点=========================//在控制台获取对象时：点击所获取的对象在firefox中显示各种属性，在chrome中是显示其子元素...
java实现二叉树的Node节点定义手撕8种遍历(一遍过)
「 虚幻私塾」
04-10 4033
Python微信订餐小程序课程视频 https://blog.csdn.net/m0_56069948/article/details/122285951 Python实战量化交易理财系统 https://blog.csdn.net/m0_56069948/article/details/122285941 java实现二叉树的Node节点定义手撕8种遍历(一遍过) 用java的思想和程序从最基本的怎么将一个int型的数组变成Node树状结构说起，再到递归前序遍历，递归中序遍历，递归后序遍历，非递归前序遍
常用的遍历节点方法
zzc1684的博客
09-20 872
[常用的遍历节点方法]取得匹配元素的所有子元素组成的集合: children(). 该方法只考虑子元素而不考虑任何后代元素.取得匹配元素后面紧邻的同辈元素的集合(但集合中只有一个元素): next()取得匹配元素前面紧邻的同辈元素的集合(但集合中只有一个元素): prev()取得匹配元素前后所有的同辈元素: siblings() 查找相关元素的前一个兄弟元素的函数elem = elem.prev...
Jquery-节点遍历4种方法
SYQ15544423296的博客
07-12 2805
Jquery-节点遍历4种方法
html 遍历子节点,【EASYDOM系列教程】之遍历节点
weixin_35851482的博客
06-11 855
Node 对象提供了一系列的属性和方法用来利用 DOM 节点树结构中节点的关系实现遍历其中的节点。关于节点之间的关系，可以参考《DOM树结构》一节有关节点之间关系的内容。获取父节点通过 HTML 页面中指定元素查找其父级节点，我们可以使用 Node 对象的 parentNode 属性实现:pNode = node.parentNode;在上述语法结构中，parentNode 属性返回指定节点的父节...
单链表的算法之头部插入节点
weixin_46571142的博客
12-22 1774
1.从头部添加新节点 (1)注意写代码过程中的箭头符号，和说话过程中的指针指向。这是两码事，容易搞混。箭头符号实际上是用指针方式来访问结构体，所以箭头符号的实质是访问结构体中的成员。更清楚一点说程序中的箭头和链表的连接没有任何关系；链表中的节点通过指针指向来连接，编程中表现为一个赋值语句（用=来进行连接），实质是把后一个节点的首地址，赋值给前一个节点中的pNext元素做为值。 #include <stdio.h> //构建一个链表的节点 struct node { int data;
XmlDocument节点遍历（C#）
热门推荐
wanglui1990的专栏
09-30 1万+
C#遍历XmlDocument对象所有节点名称、类型、属性（Attribute）源码下载static void Main(string[] args) { System.Xml.XmlDocument doc = new System.Xml.XmlDocument(); doc.Load("../../UpdateActivity2.
遍历节点树
java_zhaoyanli的专栏
03-16 881
遍历节点树 Hello World ! 电影 综艺 跑男 爸爸 极限 剧集 js: //专门遍历parent下的直接子节点 /*递归实现*/ function getChildren(parent){ //输出parent的nodeName console.l
jquery遍历节点
最新发布
06-13
在jQuery中，遍历节点主要通过选择器（selectors）来选取HTML元素，并提供一系列的方法来操作这些元素。这里有几个常见的方法： 1. `$(selector)`：选择匹配指定CSS选择器的元素。 2. `.each(function(index, ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值