示例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)
- 获取之后的同级元素
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)
- 获取之前的同级元素
prev()、prevAll(),获取前面同级元素,用法和next()、nextAll()一致
alert($(".content").prev().text());
Code language: JavaScript (javascript)
- 获取所有同级的元素
siblings()获取全部同辈元素,可以传入筛选条件
$(".content").siblings();
// 获取同级中所有p标签
$(".content").siblings("p");
Code language: JavaScript (javascript)
- 将自身也包含进选中元素集合
$(".content").siblings("p").andSelf();
Code language: JavaScript (javascript)
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已废弃,课件这里保留原有写法。
Previous: 练习一下-点击图片在下方显示大图
Next: 练习一下-完成一个评分控件