jQuery 遍历

作者: 前白 | 来源:发表于2021-10-18 21:36 被阅读0次

本节我们学习 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() 方法输出获取到的父元素标签名。

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

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

parents()方法

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

示例：

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

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

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

image
从上图可以看到， <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>

在浏览器中的演示效果：

image

遍历后代元素的方法

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>

在浏览器中的演示效果：

image
可以看到，.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>

在浏览器中的演示效果：

image
上图中列出了所有 <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>

在浏览器中的演示效果：

image

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"});
});

在浏览器中的演示效果：

image

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>

在浏览器中的演示效果：

image

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>

在浏览器中的演示效果：

image

prevAll()方法

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

示例：

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

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

在浏览器中的演示效果：

image

prevUntil()方法

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

示例：

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

在浏览器中的演示效果：

image

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

jQuery 遍历

遍历DOM

示例：

遍历祖先元素的方法

parents()方法

示例：

parents()方法

示例：

parentsUntil()方法

示例：

遍历后代元素的方法

children()方法

示例：

find()方法

示例：

遍历同胞元素的方法

siblings()方法

示例：

next()方法

示例：

nextAll()方法

示例：

nextUntil()方法

示例：

prev()方法

示例：

prevAll()方法

示例：

prevUntil()方法

示例：

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读