jQuery 遍历

原创
10/14 22:55
阅读数 14

本节我们学习 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() 方法返回两个给定参数之间的每个元素之后的所有同级元素。

示例:

例如将 starend 之间的元素的字体颜色设置为红色:

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

在浏览器中的演示效果:

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部