多个相同标记的时候进行遍历

示例HTML结构:

<p></p>
<div></div>
<div>content之前的内容</div>
<div class='content'></div>
<div>挨着content的内容</div>
<div></div>
<p></p>
<div></div>
<div></div>
<p></p>
Code language: HTML, XML (xml)
  1. 获取之后的同级元素 next():获取当前元素紧邻后面的同级元素 nextAll():获取当前元素后面所有同级元素
$(".content").next("div");
//alert($(".content").next("div").text());
//alert($(".content").next("span").text());
alert($(".content").next().text());
alert($(".content").nextAll().text());
Code language: JavaScript (javascript)
  1. 获取之前的同级元素 prev()prevAll(),获取前面同级元素,用法和next()nextAll()一致
alert($(".content").prev().text());
Code language: JavaScript (javascript)
  1. 获取所有同级的元素 siblings() 获取全部同辈元素,可以传入筛选条件
$(".content").siblings();
// 获取同级中所有p标签
$(".content").siblings("p");
Code language: JavaScript (javascript)
  1. 将自身也包含进选中元素集合
$(".content").siblings("p").andSelf();
Code language: JavaScript (javascript)
  1. end() 方法:结束当前链式最近一次筛选,将匹配元素集合还原为上一步状态 示例代码:
<!DOCTYPE html>
<html>
<head>
  <style>p { margin:10px; padding:10px; }</style>
  <script type="text/javascript" src="/jquery/jquery.js"></script>
</head>
<body>
  <p><span>Hello</span>, how are you?</p>
  <script>$("p").find("span").end().css("border", "2px red solid");</script>
</body>
</html>
Code language: HTML, XML (xml)
$("p.pc").find("span").css('color','green').end().css("border", "2px red solid");
Code language: JavaScript (javascript)

注:andSelf() 在新版jQuery已废弃,课件这里保留原有写法。

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注