JQuery遍歷元素的后代和同胞實現(xiàn)方法
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+"個直接后代是,("+$(this).attr("id")+")"); }); }); }); </script> </head> <body> <input type="button" value="點擊" 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() 方法返回被選元素的后代元素,一路向下直到最后一個后代。
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+"個后代是,("+$(this).attr("id")+")"); }); }); }); </script> </head> <body> <input type="button" value="點擊" 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+"個同胞是,("+$(this).attr("id")+")"); }); }); }); </script> </head> <body> <input type="button" value="點擊" 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()被選元素的下一個同胞元素
<!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+"個同胞是,("+$(this).attr("id")+")"); }); }); }); </script> </head> <body> <input type="button" value="點擊" 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+"個同胞是,("+$(this).attr("id")+")"); }); }); }); </script> </head> <body> <input type="button" value="點擊" 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() 方法返回介于兩個給定參數(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+"個同胞是,("+$(this).attr("id")+")"); }); }); }); </script> </head> <body> <input type="button" value="點擊" 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=前面的
所以遍歷的是指定元素的前面同胞 這個效果和next() 相仿 就不舉例子了
3.過濾
first()
first() 方法返回被選元素的首個元素。
<!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="點擊" 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() 方法返回被選元素的最后一個元素。
<!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="點擊" 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() 方法返回被選元素中帶有指定索引號的元素。
<!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="點擊" 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ī)定一個標(biāo)準(zhǔn)。不匹配這個標(biāo)準(zhǔn)的元素會被從集合中刪除,匹配的元素會被返回。
<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="點擊" 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遍歷元素的后代和同胞實現(xiàn)方法就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
jquery遍歷之parent()和parents()的區(qū)別及parentsUntil()方法詳解
這篇文章主要介紹了jquery遍歷之parent()和parents()的區(qū)別及parentsUntil()方法。需要的朋友可以過來參考下,希望對大家有所幫助2013-12-12jQuery 右下角滑動彈出可關(guān)閉重現(xiàn)層完整代碼
經(jīng)常看到網(wǎng)頁右下角有滑動彈出的廣告,這種效果可以使用jQuery彈出層實現(xiàn)。本實例使用jQuery實現(xiàn)右下角滑動彈出可關(guān)閉重現(xiàn)層2012-10-10jQuery實現(xiàn)倒計時重新發(fā)送短信驗證碼功能示例
這篇文章主要介紹了jQuery實現(xiàn)倒計時重新發(fā)送短信驗證碼功能,結(jié)合實例形式分析了基于jQuery的倒計時操作功能實現(xiàn)方法,涉及jQuery表單提交、驗證、正則操作等技巧,需要的朋友可以參考下2017-01-01jQuery插件echarts實現(xiàn)的多折線圖效果示例【附demo源碼下載】
這篇文章主要介紹了jQuery插件echarts實現(xiàn)的多折線圖效果,結(jié)合完整實例形式分析了echarts插件繪制多折線圖效果的具體步驟與相關(guān)操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03jquery+ajax每秒向后臺發(fā)送請求數(shù)據(jù)然后返回頁面的代碼
jquery+ajax每秒向后臺發(fā)送請求數(shù)據(jù)然后返回頁面(包括jquery頁面加載完畢才執(zhí)行方法)2011-01-01jQuery插件FusionCharts實現(xiàn)的MSBar3D圖效果示例【附demo源碼】
這篇文章主要介紹了jQuery插件FusionCharts實現(xiàn)的MSBar3D圖效果,結(jié)合完整實例形式分析了jQuery使用FusionCharts載入xml數(shù)據(jù)繪制MSBar3D圖的相關(guān)操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03