JQuery遍歷元素的后代和同胞實(shí)現(xiàn)方法
更新時(shí)間：2016年09月18日 11:25:44 投稿：jingxian
下面小編就為大家?guī)?lái)一篇JQuery遍歷元素的后代和同胞實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
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>無(wú)標(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>無(wú)標(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>無(wú)標(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>無(wú)標(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>無(wú)標(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>無(wú)標(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.過(guò)濾
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>無(wú)標(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>無(wú)標(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>無(wú)標(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>無(wú)標(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的用dl模擬實(shí)現(xiàn)可自定義樣式的SELECT下拉列表(已封裝)
通過(guò)dl模擬實(shí)現(xiàn)SELECT下拉列表. 其實(shí)這是項(xiàng)目中要常用到的一個(gè)效果, 于是, 在之前寫的基礎(chǔ)上封裝成了一個(gè)插件. 可自定義樣式, 可防止用戶本意劃過(guò)時(shí)觸發(fā)事件.2010-11-11
Notify - 基于jquery的消息通知插件，需要的朋友可以收藏下。2011-10-10
jQuery輕松實(shí)現(xiàn)表格的隔行變色和點(diǎn)擊行變色的實(shí)例代碼
下面小編就為大家?guī)?lái)一篇jQuery輕松實(shí)現(xiàn)表格的隔行變色和點(diǎn)擊行變色的實(shí)例代碼。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧2016-05-05
jquery網(wǎng)頁(yè)元素拖拽插件效果及實(shí)現(xiàn)
效果說(shuō)明：配合已有css樣式，載入插件后，網(wǎng)頁(yè)元素可以隨意在窗口內(nèi)拖拽，設(shè)置了原位置半透明和拖拽半透明的效果選項(xiàng)，可根據(jù)需要選擇。另外，當(dāng)頁(yè)面上有多個(gè)可拖拽元素時(shí)，可以載入另外一個(gè)用于設(shè)置z-index的插件，模擬windows窗口點(diǎn)擊置頂效果。2013-08-08
jquery編寫Tab選項(xiàng)卡滾動(dòng)導(dǎo)航切換特效
這篇文章主要為大家詳細(xì)介紹了jquery編寫Tab選項(xiàng)卡滾動(dòng)導(dǎo)航切換特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-04-04
$("").click與onclick的區(qū)別示例介紹
onclick是綁定事件，click本身是方法作用是觸發(fā)onclick事件，只要執(zhí)行了元素的click()方法，下面有個(gè)示例，大家可以看看2014-09-09
總結(jié)了一下了一下$.getJSON()一些應(yīng)用，希望大家喜歡，首先我用的的是 Newtonsoft.Json.Net20.dll2011-01-01
jquery.bgiframe.js在IE9下提示INVALID_CHARACTER_ERR錯(cuò)誤
今天測(cè)試偶然發(fā)現(xiàn)jquery.bgiframe.js在IE9環(huán)境下提示錯(cuò)誤，于是很是好奇，想辦法知道究竟，于是搜索了一下，現(xiàn)在與大家分享希望可以幫助你們2013-01-01
jquery實(shí)現(xiàn)頁(yè)面圖片等比例放大縮小功能
本文將利用jquery實(shí)現(xiàn)頁(yè)面圖片等比例放大和縮小。說(shuō)明: 頁(yè)面中經(jīng)常需要將未知大小的圖片展示在有限的空間里, 如果直接指定圖片的width和height值, 就有可能造成圖片走樣, 這段代碼就是為解決這個(gè)問(wèn)題設(shè)計(jì)2014-02-02
jQuery+CSS實(shí)現(xiàn)的網(wǎng)頁(yè)二級(jí)下滑菜單效果
這篇文章主要介紹了jQuery+CSS實(shí)現(xiàn)的網(wǎng)頁(yè)二級(jí)下滑菜單效果,涉及jquery鼠標(biāo)hover事件及show與hide操作頁(yè)面元素的顯示與隱藏效果,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08