jQuery 遍历

本节我们学习 jQuery 的遍历。什么是遍历呢？遍历是指沿着某条搜索路线，依次对树中每个节点均做一次访问。访问结点所做的操作依赖于具体的应用问题，具体的访问操作可能是检查节点的值、更新节点的值等。不同的遍历方式，其访问节点的顺序是不一样的。遍历是适用于多元素集合的情况，例如遍历数组、遍历集合等。

jQuery 中的遍历其实就是根据其相对于其他元素的关系来查找 HTML 元素，以某项选择开始，并沿着这个选择移动，直到抵达所需要的元素为止，这一过程称为遍历。

遍历DOM

jQuery 提供了多种遍历 DOM 的方法。在讲遍历方法之间，我们先来看下面段代码。

示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_侠课岛(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
</head>
<body>
  <div>
    <h3>侠课岛</h3>
    <div>
      <p>侠课岛的课程有下面几种：</p>
      <ul>
        <li>Python</li>
        <li>C++</li>
        <li>Java</li>
        <li>PHP</li>
        <li>GoLand</li>
      </ul>
    </div>
    <p><button>按钮</button></p>
  </div>
</body>
</html>

在这段代码中，元素与元素之间有不同的关系。举个例子，如果用我们生活中的称呼来解释，可以将上述代码中 <ul> 看作是所有 <li> 元素的父元素。反之 <li> 元素就是 <ul> 元素的子元素。而其他的元素关系也可以这样理解。

例如 <ul> 元素的它上面的 <p> 元素处于同一等级，所以可以叫同胞元素（有点像兄弟姐妹的意思）。

而最外围的 <div> 元素可以统称为它里面所有元素的祖先元素。祖先元素可以是父、祖父或曾祖父元素等等。那么在这个最外层 <div> 元素里面的元素就称为后代元素，后代元素可以包括儿子、孙子、曾孙子等等。

遍历祖先元素的方法

jQuery 中提供了一些用于向上遍历 DOM 树的方法，那么向上遍历也可以理解为遍历祖先元素，包括某个元素的父元素、祖父元素、曾祖父元素等。

提供的方法也很简单，从名字我们就大概能看出这个方法的作用：

方法	描述
parent()	返回被选元素的直接父元素
parents()	返回被选元素的所有祖先元素
parentsUntil()	返回介于两个给定元素之间的所有祖先元素

parents()方法

parents() 方法用于遍历指定元素的直接父元素。直接父元素就是包围指定元素的这个元素，例如：

<div>
    <p>
      <span></span>
    </p>
</div>

这个 HTML 代码中，<span> 元素的直接父元素只有 <p> 元素，而 <div> 是 <p> 的直接父元素，<div> 也相当于 <span> 的祖父元素。

示例：

我们通过一个例子来看一下parents() 方法的使用，例如上面的 HTML 代码中，我们想要获取 <h3> 元素的父元素：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_侠课岛(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    $("button").click(function(){
      var tag = $("h3").parent().prop('tagName');
      alert(tag);
    });
  });
</script>
</head>
<body>
  <div>
    <h3>侠课岛</h3>
    <div>
      <p>侠课岛的课程有下面几种：</p>
      <ul>
        <li>Python</li>
        <li>C++</li>
        <li>Java</li>
        <li>PHP</li>
        <li>GoLand</li>
      </ul>
    </div>
    <p><button>点击按钮</button></p>
  </div>
</body>
</html>

上述代码中，我们通过 parent() 方法找到 <h3> 的父元素，然后使用 prop() 方法返回找到的父元素的属性和值，这用到了 tagName 属性，也就是获取元素的标签名。最后通过 alert() 方法输出获取到的父元素标签名。

我们看一下在浏览器中的效果：

通过输出结果我们也可以看出，parent() 方法成功找到了 <h3> 元素的父元素，即 <div>。

parents()方法

parents() 方法可以用于遍历指定元素的所有祖先元素。

示例：

找到 <li> 元素的所有祖先元素：

$(function(){
    $("button").click(function(){
      var tag = $("li").parents().map(function(){
        return this.tagName;
      }).get().join('，');
      alert(tag);
    });
});

我们看一下在浏览器中的效果：

从上图可以看到， <li> 元素的祖先元素有 UL，DIV，DIV，BODY，HTML。

parentsUntil()方法

parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。

示例：

例如查找 <li> 元素在 .div_con 类选择器所在元素之间的所有祖先元素：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_侠课岛(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    $("button").click(function(){
      var tag = $("li").parentsUntil(".div_con").map(function(){
        return this.tagName;
      }).get().join('，');
      alert(tag);
    });
  });
</script>
</head>
<body>
  <div class="div_con">
    <h3>侠课岛</h3>
    <div>
      <p>侠课岛的课程有下面几种：</p>
      <ul>
        <li>Python</li>
        <li>C++</li>
        <li>Java</li>
        <li>PHP</li>
        <li>GoLand</li>
      </ul>
    </div>
    <p><button>点击按钮</button></p>
  </div>
</body>
</html>

在浏览器中的演示效果：

遍历后代元素的方法

jQuery 中向下遍历DOM 树的方法有 children() 和 find() 方法，我们一起来看一下。

children()方法

children() 方法用于返回指定元素的所有直接子元素。

示例：

查找 .div_con 元素的所有直接子元素：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_侠课岛(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    $("button").click(function(){
      var tag = $(".div_con").children().map(function(){
        return this.tagName;
      }).get().join('，');
      alert(tag);
    });
  });
</script>
</head>
<body>
  <div class="div_con">
    <h3>侠课岛</h3>
    <div>
      <p>侠课岛的课程有下面几种：</p>
      <ul>
        <li>Python</li>
        <li>C++</li>
        <li>Java</li>
        <li>PHP</li>
        <li>GoLand</li>
      </ul>
    </div>
    <p><button>点击按钮</button></p>
  </div>
</body>
</html>

在浏览器中的演示效果：

可以看到，.div_con 的直接子元素有三个，分别是 <h3>、<div>、<p>。而其他的元素可以看作 .div_con 的后代元素。

find()方法

find() 方法返回指定元素的所有后代元素，包括子元素、孙元素、曾孙元素等等。

示例：

例如我们获取 <body> 元素的所有后代元素：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_侠课岛(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    $("button").click(function(){
      var tag = $("body").find("*").map(function(){
        return this.tagName;
      }).get().join('，');
      alert(tag);
    });
  });
</script>
</head>
<body>
  <div class="div_con">
    <h3>侠课岛</h3>
    <div>
      <p>侠课岛的课程有下面几种：</p>
      <ul>
        <li>Python</li>
        <li>C++</li>
        <li>Java</li>
        <li>PHP</li>
        <li>GoLand</li>
      </ul>
    </div>
    <p><button>点击按钮</button></p>
  </div>
</body>
</html>

在浏览器中的演示效果：

上图中列出了所有 <body> 元素的后代元素。

遍历同胞元素的方法

jQuery 中遍历 DOM 树中同胞元素的方法有下面几种：

方法	描述
siblings()	返回指定元素的所有同胞元素
next()	返回指定元素的下一个同胞元素
nextAll()	返回指定元素的所有跟随的同胞元素
nextUntil()	返回介于两个给定参数之间的所有跟随的同胞元素
prev()	返回指定元素的上一个同胞元素
prevAll()	返回指定元素的所有前面的同胞元素
prevUntil()	返回介于两个给定参数之间的所有前面的同胞元素

siblings()方法

siblings() 方法可以获得匹配集合中每个元素的同胞，通过选择器进行筛选是可选的。

示例：

例如输出 sib 类选择器的同胞元素：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_侠课岛(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    $("button").click(function(){
      var tag = $(".sib").siblings().map(function(){
        return this.tagName;
      }).get().join('，');
      alert(tag);
    });
  });
</script>
</head>
<body>
  <div class="div_con">
    <h3>侠课岛</h3>
    <div>
      <p class="sib">侠课岛的课程有下面几种：</p>
      <ul>
        <li>Python</li>
        <li>C++</li>
        <li>Java</li>
        <li>PHP</li>
        <li>GoLand</li>
      </ul>
    </div>
    <p><button>点击按钮</button></p>
  </div>
</body>
</html>

在浏览器中的演示效果：

next()方法

next() 方法返回被选元素的后一个同级元素。

示例：

例如我们将 li_sib 类选择器后面的一个元素颜色设置为红色：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_侠课岛(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    $(".li_sib").next().css({"color":"red"});
  });
</script>
</head>
<body>
  <div class="div_con">
    <h3>侠课岛</h3>
    <div>
      <p class="sib">侠课岛的课程有下面几种：</p>
      <ul>
        <li>Python</li>
        <li class="li_sib">C++</li>
        <li>Java</li>
        <li>PHP</li>
        <li>GoLand</li>
      </ul>
    </div>
    <p><button>点击按钮</button></p>
  </div>
</body>
</html>

nextAll()方法

nextAll() 方法与 next() 方法的使用差不多。但是 nextAll() 方法用于返回被选元素之后的所有同级元素。

示例：

$(function(){
    $(".li_sib").nextAll().css({"color":"red"});
});

在浏览器中的演示效果：

nextUntil()方法

nextUntil() 方法返回两个给定参数之间的每个元素之后的所有同级元素。

示例：

例如将 star 与 end 之间的元素的字体颜色设置为红色：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_侠课岛(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    $(".start").nextUntil(".end").css({"color":"red"});
  });
</script>
</head>
<body>
  <div class="div_con">
    <h3>侠课岛</h3>
    <div>
      <p class="sib">侠课岛的课程有下面几种：</p>
      <ul>
        <li>Python</li>
        <li class="start">C++</li>
        <li>Java</li>
        <li>PHP</li>
        <li>GoLand</li>
        <li class="end">Node.js</li>
        <li>CSS</li>
      </ul>
    </div>
    <p><button>点击按钮</button></p>
  </div>
</body>
</html>

在浏览器中的演示效果：

prev()方法

prev() 方法与 next() 方法相反，用于返回指定元素的上一个同胞元素。

示例：

将 star 的上一个元素字体颜色设置为红色：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_侠课岛(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    $(".start").prev().css({"color":"red"});
  });
</script>
</head>
<body>
  <div class="div_con">
    <h3>侠课岛</h3>
    <div>
      <p class="sib">侠课岛的课程有下面几种：</p>
      <ul>
        <li>Python</li>
        <li class="start">C++</li>
        <li>Java</li>
        <li>PHP</li>
        <li>GoLand</li>
        <li class="end">Node.js</li>
        <li>CSS</li>
      </ul>
    </div>
    <p><button>点击按钮</button></p>
  </div>
</body>
</html>

在浏览器中的演示效果：

prevAll()方法

prevAll() 方法与 nextAll 方法相反，用于返回指定元素的所有前面的同胞元素。

示例：

将 end 类选择器之前的所有元素字体颜色设置为红色：

$(function(){
    $(".end").prevAll().css({"color":"red"});
});

在浏览器中的演示效果：

prevUntil()方法

prevUntil() 方法用于返回介于两个给定参数之间的所有前面的同胞元素。

示例：

$(function(){
    $(".start").prevUntil("end").css({"color":"red"});
});

在浏览器中的演示效果：

链接：https://www.9xkd.com/

最后编辑于：2021.10.14 23:10:52

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 162,158评论 4赞 370
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 68,600评论 1赞 307
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 111,785评论 0赞 254
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 44,655评论 0赞 220
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 53,075评论 3赞 295
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 41,002评论 1赞 225
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 32,146评论 2赞 318
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 30,918评论 0赞 211
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 34,671评论 1赞 250
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 30,838评论 2赞 254
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 32,318评论 1赞 265
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 28,636评论 3赞 263
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 33,343评论 3赞 244
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 26,187评论 0赞 8
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 26,982评论 0赞 201
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 36,126评论 2赞 285
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 35,934评论 2赞 279

jQuery 遍历

遍历DOM

示例：

遍历祖先元素的方法

parents()方法

示例：

parents()方法

示例：

parentsUntil()方法

示例：

遍历后代元素的方法

children()方法

示例：

find()方法

示例：

遍历同胞元素的方法

siblings()方法

示例：

next()方法

示例：

nextAll()方法

示例：

nextUntil()方法

示例：

prev()方法

示例：

prevAll()方法

示例：

prevUntil()方法

示例：

推荐阅读更多精彩内容