jQuery向父輩遍歷的簡單方法

更新時(shí)間：2016年09月18日 10:30:53 投稿：jingxian

下面小編就為大家?guī)硪黄猨Query向父輩遍歷的簡單方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

通過DOM樹可以可容易的訪問到html文檔中的所有元素

例如向上訪問父輩的元素有以下方法

1.parent()方法可以得到所定元素的直接父元素

$("span").parent();得到<span>元素的直接父元素

2.parents()方法得到給定元素的所有父元素

$("span").parents();得到<span>元素的所有父元素

$("span").panents(".text");得到<span>元素的父元素中class="text"的元素

3.parentsUntil()方法得到兩個(gè)給定元素之間的元素

$("span").parentsUntil(".text");得到<span>元素與class="text"元素之間的所有元素

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
 <style>
 .container
 {
  float:left;
  margin-left:30px;
 }
.container div
 {
  border:1px solid grey;
  margin:15px auto;
 }
.ancestor1-1,.ancestor2-1,.ancestor3-1,.ancestor4-1
{
  width:150px;
  height:150px;
} 
.ancestor1-2,.ancestor2-2,.ancestor3-2,.ancestor4-2
{
  width:120px;
  height:120px;
}
.ancestor1-3,.ancestor2-3,.ancestor3-3,.ancestor4-3
{
  width:90px;
  height:90px;
}
.now1,.now2,.now3,.now4
{
  width:60px;
  height:60px;
}
 </style>
 <script>
$(document).ready(function(){
$(".now1").parent().css("border-color","red");
$(".now2").parents().css("border-color","red");
$(".now3").parents(".ancestor3-2").css("border-color","red");
$(".now4").parentsUntil(".ancestor4-1").css("border-color","red");
}
);
 </script>
</head>
<body>
<div>
  <div class="container">
    <div class="ancestor1-1"><div class="ancestor1-2"><div class="ancestor1-3"><div class="now1">給定元素</div></div></div></div>
  </div>
  <div class="container">
    <div class="ancestor2-1"><div class="ancestor2-2"><div class="ancestor2-3"><div class="now2">給定元素</div></div></div></div>
  </div>
  <div class="container">
    <div class="ancestor3-1"><div class="ancestor3-2"><div class="ancestor3-3"><div class="now3">給定元素</div></div></div></div>
  </div>
  <div class="container">
    <div class="ancestor4-1"><div class="ancestor4-2"><div class="ancestor4-3"><div class="now4">給定元素</div></div></div></div>
  </div>
</div>
</body>
</html>

效果圖：

以上這篇jQuery向父輩遍歷的簡單方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

jQuery中:last選擇器用法實(shí)例
這篇文章主要介紹了jQuery中:last選擇器用法,實(shí)例分析了:last選擇器的功能、定義及匹配時(shí)的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2014-12-12
簡單常用的幻燈片播放實(shí)現(xiàn)代碼
幻燈片自動播放圖片是當(dāng)前網(wǎng)站比較流行的一個(gè)展示方式，這里項(xiàng)目需要，我自己做了一個(gè)簡單的，就不詳細(xì)講解了，代碼很簡單。直接看效果圖和代碼吧，希望對大家有所幫助
2013-09-09
jquery訪問ashx文件示例代碼
ashx文件與.aspx文件類似，可以通過它來調(diào)用HttpHandler類。下面與大家介紹下jquery訪問ashx文件的過程
2014-08-08
JQuery事件委托(適用于給動態(tài)生成的腳本元素添加事件)
jq寫了點(diǎn)擊事件，是通過獲取元素的類名被點(diǎn)擊后執(zhí)行對應(yīng)方法，但是研發(fā)套完模板，他會把所有的結(jié)構(gòu)先清空，導(dǎo)致jq根本找不到那個(gè)元素，所以事件就不得執(zhí)行了,需要的朋友可以參考下
2020-02-02
jquery實(shí)現(xiàn)勾選復(fù)選框觸發(fā)事件給input賦值
本文給大家介紹的是一段十分實(shí)用的代碼，使用jQuery實(shí)現(xiàn)勾選復(fù)選框觸發(fā)事件給input賦值，在制作項(xiàng)目的時(shí)候經(jīng)常需要用到此功能，這里分享給大家。
2015-02-02
jQuery select的操作實(shí)現(xiàn)代碼
jQuery對select的操作的實(shí)際應(yīng)用代碼。方便大家學(xué)習(xí)jquery
2009-05-05
jQuery實(shí)現(xiàn)帶有洗牌效果的動畫分頁實(shí)例
這篇文章主要介紹了jQuery實(shí)現(xiàn)帶有洗牌效果的動畫分頁,涉及jquery頁面元素樣式及animate方法的相關(guān)使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-08-08
使用jQuery validate 驗(yàn)證注冊表單實(shí)例演示
Validation是jQuery的插件，提供的方法可以大大簡化驗(yàn)證表單的工作，接下來為大家詳細(xì)介紹下使用方法，感興趣的各位可以參考下哈
2013-03-03
jQuery實(shí)現(xiàn)form表單序列化轉(zhuǎn)換為json對象功能示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)form表單序列化轉(zhuǎn)換為json對象功能,結(jié)合實(shí)例形式分析了表單數(shù)據(jù)傳輸中使用serializeJson進(jìn)行序列化操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
2018-05-05
jquery中cookie用法實(shí)例詳解(獲取,存儲,刪除等)
這篇文章主要介紹了jquery中cookie用法,結(jié)合實(shí)例詳細(xì)分析了jQuery操作cookie的獲取,存儲,刪除等操作,并附帶了Jquery操作Cookie記錄用戶查詢過信息實(shí)現(xiàn)方法,需要的朋友可以參考下
2016-01-01