JQuery遍歷元素的后代和同胞實(shí)現(xiàn)方法
更新時(shí)間：2016年09月18日 11:25:44 投稿：jingxian
下面小編就為大家?guī)硪黄狫Query遍歷元素的后代和同胞實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
1.遍歷后代
children()
children() 方法返回被選元素的所有直接子元素。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標(biāo)題文檔</title>
<style type="text/css">
</style>
<script type="text/javascript" src="jQuery/jquery-1.12.1.js"></script>
<script type="text/javascript">
$(function(){
$("#btn").click(function(){
$("#div1").children().each(function(i, e) {
$("#info").html($("#info").html()+"第"+i+"個(gè)直接后代是,("+$(this).attr("id")+")");
});
});
});
</script>
</head>
<body>
<input type="button" value="點(diǎn)擊" id="btn"><div id="info"></div>
<div id="div1">
<div id="div2">
<div id="div3">
<div id="div4">
</div>
</div>
</div>
<p id="p1"></p>
<p id="p2"></p>
<span id="span1"></span>
<span id="span2"></span>
<p id="p3"></p>
</div>
</body>
</html>
find()
find() 方法返回被選元素的后代元素，一路向下直到最后一個(gè)后代。
find()里必須加上selecter 如果不加就顯示不了
所以里面必須加選擇器 例如find("*") find("span")
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標(biāo)題文檔</title>
<style type="text/css">
</style>
<script type="text/javascript" src="jQuery/jquery-1.12.1.js"></script>
<script type="text/javascript">
$(function(){
$("#btn").click(function(){
$("#div1").find("*").each(function(i, e) {
$("#info").html($("#info").html()+"第"+i+"個(gè)后代是,("+$(this).attr("id")+")");
});
});
});
</script>
</head>
<body>
<input type="button" value="點(diǎn)擊" id="btn"><div id="info"></div>
<div id="div1">
<div id="div2">
<div id="div3">
<div id="div4">
</div>
</div>
</div>
<p id="p1"></p>
<p id="p2"></p>
<span id="span1"></span>
<span id="span2"></span>
<p id="p3"></p>
</div>
</body>
</html>
2.遍歷同胞
siblings()
siblings() 方法返回被選元素的所有同胞元素。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標(biāo)題文檔</title>
<style type="text/css">
</style>
<script type="text/javascript" src="jQuery/jquery-1.12.1.js"></script>
<script type="text/javascript">
$(function(){
$("#btn").click(function(){
$("#div2").siblings().each(function(i, e) {
$("#info").html($("#info").html()+"第"+i+"個(gè)同胞是,("+$(this).attr("id")+")");
});
});
});
</script>
</head>
<body>
<input type="button" value="點(diǎn)擊" id="btn"><div id="info"></div>
<div id="div1">
<div id="div2">
<div id="div3">
<div id="div4">
</div>
</div>
</div>
<p id="p1"></p>
<p id="p2"></p>
<span id="span1"></span>
<span id="span2"></span>
<p id="p3"></p>
</div>
</body>
</html>
next()
next()被選元素的下一個(gè)同胞元素
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標(biāo)題文檔</title>
<style type="text/css">
</style>
<script type="text/javascript" src="jQuery/jquery-1.12.1.js"></script>
<script type="text/javascript">
$(function(){
$("#btn").click(function(){
$("#p2").next().each(function(i, e) {
$("#info").html($("#info").html()+"第"+i+"個(gè)同胞是,("+$(this).attr("id")+")");
});
});
});
</script>
</head>
<body>
<input type="button" value="點(diǎn)擊" id="btn"><div id="info"></div>
<div id="div1">
<div id="div2">
<div id="div3">
<div id="div4">
</div>
</div>
</div>
<p id="p1"></p>
<p id="p2"></p>
<span id="span1"></span>
<span id="span2"></span>
<p id="p3"></p>
</div>
</body>
</html>
nextAll()
nextAll() 方法返回被選元素的所有跟隨的同胞元素。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標(biāo)題文檔</title>
<style type="text/css">
</style>
<script type="text/javascript" src="jQuery/jquery-1.12.1.js"></script>
<script type="text/javascript">
$(function(){
$("#btn").click(function(){
$("#p2").nextAll().each(function(i, e) {
$("#info").html($("#info").html()+"第"+i+"個(gè)同胞是,("+$(this).attr("id")+")");
});
});
});
</script>
</head>
<body>
<input type="button" value="點(diǎn)擊" id="btn"><div id="info"></div>
<div id="div1">
<div id="div2">
<div id="div3">
<div id="div4">
</div>
</div>
</div>
<p id="p1"></p>
<p id="p2"></p>
<span id="span1"></span>
<span id="span2"></span>
<p id="p3"></p>
</div>
</body>
</html>
nextUntil()
nextUntil() 方法返回介于兩個(gè)給定參數(shù)之間的所有跟隨的同胞元素。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標(biāo)題文檔</title>
<style type="text/css">
</style>
<script type="text/javascript" src="jQuery/jquery-1.12.1.js"></script>
<script type="text/javascript">
$(function(){
$("#btn").click(function(){
$("#p2").nextUntil("#p3").each(function(i, e) {
$("#info").html($("#info").html()+"第"+i+"個(gè)同胞是,("+$(this).attr("id")+")");
});
});
});
</script>
</head>
<body>
<input type="button" value="點(diǎn)擊" id="btn"><div id="info"></div>
<div id="div1">
<div id="div2">
<div id="div3">
<div id="div4">
</div>
</div>
</div>
<p id="p1"></p>
<p id="p2"></p>
<span id="span1"></span>
<span id="span2"></span>
<p id="p3"></p>
</div>
</body>
</html>
prev()
prev()
prevAll()
prevUntil()
prev=previous=前面的
所以遍歷的是指定元素的前面同胞 這個(gè)效果和next() 相仿 就不舉例子了
3.過濾
first()
first() 方法返回被選元素的首個(gè)元素。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標(biāo)題文檔</title>
<style type="text/css">
</style>
<script type="text/javascript" src="jQuery/jquery-1.12.1.js"></script>
<script type="text/javascript">
$(function(){
$("#btn").click(function(){
$("div p").first().each(function(i, e) {
$("#info").html($("#info").html()+"("+$(this).attr("id")+")");
});
});
});
</script>
</head>
<body>
<input type="button" value="點(diǎn)擊" id="btn"><div id="info"></div>
<div id="div1">
<div id="div2">
<div id="div3">
<div id="div4">
</div>
</div>
</div>
<p id="p1"></p>
<p id="p2"></p>
<span id="span1"></span>
<span id="span2"></span>
<p id="p3"></p>
</div>
</body>
</html>
last()
last() 方法返回被選元素的最后一個(gè)元素。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標(biāo)題文檔</title>
<style type="text/css">
</style>
<script type="text/javascript" src="jQuery/jquery-1.12.1.js"></script>
<script type="text/javascript">
$(function(){
$("#btn").click(function(){
$("div p").last().each(function(i, e) {
$("#info").html($("#info").html()+"("+$(this).attr("id")+")");
});
});
});
</script>
</head>
<body>
<input type="button" value="點(diǎn)擊" id="btn"><div id="info"></div>
<div id="div1">
<div id="div2">
<div id="div3">
<div id="div4">
</div>
</div>
</div>
<p id="p1"></p>
<p id="p2"></p>
<span id="span1"></span>
<span id="span2"></span>
<p id="p3"></p>
</div>
</body>
</html>
eq()
eq() 方法返回被選元素中帶有指定索引號(hào)的元素。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標(biāo)題文檔</title>
<style type="text/css">
</style>
<script type="text/javascript" src="jQuery/jquery-1.12.1.js"></script>
<script type="text/javascript">
$(function(){
$("#btn").click(function(){
$("div p").eq(1).each(function(i, e) {
$("#info").html($("#info").html()+"("+$(this).attr("id")+")");
});
});
});
</script>
</head>
<body>
<input type="button" value="點(diǎn)擊" id="btn"><div id="info"></div>
<div id="div1">
<div id="div2">
<div id="div3">
<div id="div4">
</div>
</div>
</div>
<p id="p1"></p>
<p id="p2"></p>
<span id="span1"></span>
<span id="span2"></span>
<p id="p3"></p>
</div>
</body>
</html>
filter()
filter() 方法允許您規(guī)定一個(gè)標(biāo)準(zhǔn)。不匹配這個(gè)標(biāo)準(zhǔn)的元素會(huì)被從集合中刪除，匹配的元素會(huì)被返回。
<script type="text/javascript">
$(function(){
$("#btn").click(function(){
$("div p").filter("#p2").each(function(i, e) {
$("#info").html($("#info").html()+"("+$(this).attr("id")+")");
});
});
});
</script>
not()
not() 方法返回不匹配標(biāo)準(zhǔn)的所有元素。
not() 方法與 filter() 相反。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標(biāo)題文檔</title>
<style type="text/css">
</style>
<script type="text/javascript" src="jQuery/jquery-1.12.1.js"></script>
<script type="text/javascript">
$(function(){
$("#btn").click(function(){
$("div p").not("#p2").each(function(i, e) {
$("#info").html($("#info").html()+"("+$(this).attr("id")+")");
});
});
});
</script>
</head>
<body>
<input type="button" value="點(diǎn)擊" id="btn"><div id="info"></div>
<div id="div1">
<div id="div2">
<div id="div3">
<div id="div4">
</div>
</div>
</div>
<p id="p1"></p>
<p id="p2"></p>
<span id="span1"></span>
<span id="span2"></span>
<p id="p3"></p>
</div>
</body>
</html>
以上這篇JQuery遍歷元素的后代和同胞實(shí)現(xiàn)方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
jQuery操作選中select下拉框的值代碼實(shí)例
這篇文章主要介紹了jQuery操作選中select下拉框的值代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-02-02
jquery遍歷之parent()和parents()的區(qū)別及parentsUntil()方法詳解
這篇文章主要介紹了jquery遍歷之parent()和parents()的區(qū)別及parentsUntil()方法。需要的朋友可以過來參考下，希望對(duì)大家有所幫助2013-12-12
jQuery 右下角滑動(dòng)彈出可關(guān)閉重現(xiàn)層完整代碼
經(jīng)常看到網(wǎng)頁(yè)右下角有滑動(dòng)彈出的廣告，這種效果可以使用jQuery彈出層實(shí)現(xiàn)。本實(shí)例使用jQuery實(shí)現(xiàn)右下角滑動(dòng)彈出可關(guān)閉重現(xiàn)層2012-10-10
jQuery中使用validate插件校驗(yàn)表單功能
這篇文章主要介紹了jQuery中使用validate插件校驗(yàn)表單功能，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒,需要的朋友可以參考下2019-05-05
jQuery實(shí)現(xiàn)倒計(jì)時(shí)重新發(fā)送短信驗(yàn)證碼功能示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)倒計(jì)時(shí)重新發(fā)送短信驗(yàn)證碼功能,結(jié)合實(shí)例形式分析了基于jQuery的倒計(jì)時(shí)操作功能實(shí)現(xiàn)方法,涉及jQuery表單提交、驗(yàn)證、正則操作等技巧,需要的朋友可以參考下2017-01-01
用Jquery實(shí)現(xiàn)滾動(dòng)新聞
此文主要用Jquery實(shí)現(xiàn)滾動(dòng)新聞,Jquery的強(qiáng)大功能，幾行代碼即可實(shí)現(xiàn)，需要的朋友可以參考下2014-02-02
jQuery插件echarts實(shí)現(xiàn)的多折線圖效果示例【附demo源碼下載】
這篇文章主要介紹了jQuery插件echarts實(shí)現(xiàn)的多折線圖效果,結(jié)合完整實(shí)例形式分析了echarts插件繪制多折線圖效果的具體步驟與相關(guān)操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03
Jquery針對(duì)tr td的一些實(shí)用操作方法(必看篇)
下面就為大家?guī)硪黄狫query針對(duì)tr td的一些實(shí)用操作方法(必看篇)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-10-10
jquery+ajax每秒向后臺(tái)發(fā)送請(qǐng)求數(shù)據(jù)然后返回頁(yè)面的代碼
jquery+ajax每秒向后臺(tái)發(fā)送請(qǐng)求數(shù)據(jù)然后返回頁(yè)面（包括jquery頁(yè)面加載完畢才執(zhí)行方法）2011-01-01
jQuery插件FusionCharts實(shí)現(xiàn)的MSBar3D圖效果示例【附demo源碼】
這篇文章主要介紹了jQuery插件FusionCharts實(shí)現(xiàn)的MSBar3D圖效果,結(jié)合完整實(shí)例形式分析了jQuery使用FusionCharts載入xml數(shù)據(jù)繪制MSBar3D圖的相關(guān)操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03