jQuery 遍歷

本節(jié)我們學(xué)習(xí) jQuery 的遍歷。什么是遍歷呢谐鼎？遍歷是指沿著某條搜索路線舰蟆，依次對樹中每個節(jié)點均做一次訪問。訪問結(jié)點所做的操作依賴于具體的應(yīng)用問題狸棍，具體的訪問操作可能是檢查節(jié)點的值身害、更新節(jié)點的值等。不同的遍歷方式草戈，其訪問節(jié)點的順序是不一樣的塌鸯。遍歷是適用于多元素集合的情況，例如遍歷數(shù)組唐片、遍歷集合等丙猬。

jQuery 中的遍歷其實就是根據(jù)其相對于其他元素的關(guān)系來查找 HTML 元素，以某項選擇開始费韭，并沿著這個選擇移動淮悼，直到抵達所需要的元素為止，這一過程稱為遍歷揽思。

遍歷DOM

jQuery 提供了多種遍歷 DOM 的方法袜腥。在講遍歷方法之間，我們先來看下面段代碼钉汗。

示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_俠課島(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
</head>
<body>
  <div>
    <h3>俠課島</h3>
    <div>
      <p>俠課島的課程有下面幾種：</p>
      <ul>
        <li>Python</li>
        <li>C++</li>
        <li>Java</li>
        <li>PHP</li>
        <li>GoLand</li>
      </ul>
    </div>
    <p><button>按鈕</button></p>
  </div>
</body>
</html>

在這段代碼中羹令，元素與元素之間有不同的關(guān)系。舉個例子损痰，如果用我們生活中的稱呼來解釋福侈，可以將上述代碼中 <ul> 看作是所有 <li> 元素的父元素。反之 <li> 元素就是 <ul> 元素的子元素卢未。而其他的元素關(guān)系也可以這樣理解肪凛。

例如 <ul> 元素的它上面的 <p> 元素處于同一等級，所以可以叫同胞元素（有點像兄弟姐妹的意思）辽社。

而最外圍的 <div> 元素可以統(tǒng)稱為它里面所有元素的祖先元素伟墙。祖先元素可以是父、祖父或曾祖父元素等等滴铅。那么在這個最外層 <div> 元素里面的元素就稱為后代元素戳葵，后代元素可以包括兒子、孫子汉匙、曾孫子等等拱烁。

遍歷祖先元素的方法

jQuery 中提供了一些用于向上遍歷 DOM 樹的方法生蚁，那么向上遍歷也可以理解為遍歷祖先元素，包括某個元素的父元素戏自、祖父元素邦投、曾祖父元素等。

提供的方法也很簡單擅笔，從名字我們就大概能看出這個方法的作用：

方法	描述
parent()	返回被選元素的直接父元素
parents()	返回被選元素的所有祖先元素
parentsUntil()	返回介于兩個給定元素之間的所有祖先元素

parents()方法

parents() 方法用于遍歷指定元素的直接父元素尼摹。直接父元素就是包圍指定元素的這個元素，例如：

<div>
    <p>
      <span></span>
    </p>
</div>

這個 HTML 代碼中剂娄，<span> 元素的直接父元素只有 <p> 元素蠢涝，而 <div> 是 <p> 的直接父元素，<div> 也相當(dāng)于 <span> 的祖父元素阅懦。

示例：

我們通過一個例子來看一下parents() 方法的使用和二，例如上面的 HTML 代碼中，我們想要獲取 <h3> 元素的父元素：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_俠課島(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    $("button").click(function(){
      var tag = $("h3").parent().prop('tagName');
      alert(tag);
    });
  });
</script>
</head>
<body>
  <div>
    <h3>俠課島</h3>
    <div>
      <p>俠課島的課程有下面幾種：</p>
      <ul>
        <li>Python</li>
        <li>C++</li>
        <li>Java</li>
        <li>PHP</li>
        <li>GoLand</li>
      </ul>
    </div>
    <p><button>點擊按鈕</button></p>
  </div>
</body>
</html>

上述代碼中耳胎，我們通過 parent() 方法找到 <h3> 的父元素惯吕，然后使用 prop() 方法返回找到的父元素的屬性和值，這用到了 tagName 屬性怕午，也就是獲取元素的標(biāo)簽名废登。最后通過 alert() 方法輸出獲取到的父元素標(biāo)簽名。

我們看一下在瀏覽器中的效果：

image

通過輸出結(jié)果我們也可以看出郁惜，parent() 方法成功找到了 <h3> 元素的父元素堡距，即 <div>。

parents()方法

parents() 方法可以用于遍歷指定元素的所有祖先元素兆蕉。

示例：

找到 <li> 元素的所有祖先元素：

$(function(){
    $("button").click(function(){
      var tag = $("li").parents().map(function(){
        return this.tagName;
      }).get().join('羽戒，');
      alert(tag);
    });
});

我們看一下在瀏覽器中的效果：

image

從上圖可以看到踢匣， <li> 元素的祖先元素有 UL蜂林，DIV誉结，DIV命雀，BODY，HTML饰潜。

parentsUntil()方法

parentsUntil() 方法返回介于兩個給定元素之間的所有祖先元素堵腹。

示例：

例如查找 <li> 元素在 .div_con 類選擇器所在元素之間的所有祖先元素：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_俠課島(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    $("button").click(function(){
      var tag = $("li").parentsUntil(".div_con").map(function(){
        return this.tagName;
      }).get().join('涵防，');
      alert(tag);
    });
  });
</script>
</head>
<body>
  <div class="div_con">
    <h3>俠課島</h3>
    <div>
      <p>俠課島的課程有下面幾種：</p>
      <ul>
        <li>Python</li>
        <li>C++</li>
        <li>Java</li>
        <li>PHP</li>
        <li>GoLand</li>
      </ul>
    </div>
    <p><button>點擊按鈕</button></p>
  </div>
</body>
</html>

在瀏覽器中的演示效果：

image

遍歷后代元素的方法

jQuery 中向下遍歷DOM 樹的方法有 children() 和 find() 方法测萎，我們一起來看一下亡电。

children()方法

children() 方法用于返回指定元素的所有直接子元素。

示例：

查找 .div_con 元素的所有直接子元素：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_俠課島(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    $("button").click(function(){
      var tag = $(".div_con").children().map(function(){
        return this.tagName;
      }).get().join('绳泉，');
      alert(tag);
    });
  });
</script>
</head>
<body>
  <div class="div_con">
    <h3>俠課島</h3>
    <div>
      <p>俠課島的課程有下面幾種：</p>
      <ul>
        <li>Python</li>
        <li>C++</li>
        <li>Java</li>
        <li>PHP</li>
        <li>GoLand</li>
      </ul>
    </div>
    <p><button>點擊按鈕</button></p>
  </div>
</body>
</html>

在瀏覽器中的演示效果：

image

可以看到逊抡，.div_con 的直接子元素有三個，分別是 <h3>零酪、<div>冒嫡、<p>。而其他的元素可以看作 .div_con 的后代元素四苇。

find()方法

find() 方法返回指定元素的所有后代元素孝凌，包括子元素、孫元素月腋、曾孫元素等等蟀架。

示例：

例如我們獲取 <body> 元素的所有后代元素：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_俠課島(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    $("button").click(function(){
      var tag = $("body").find("*").map(function(){
        return this.tagName;
      }).get().join('，');
      alert(tag);
    });
  });
</script>
</head>
<body>
  <div class="div_con">
    <h3>俠課島</h3>
    <div>
      <p>俠課島的課程有下面幾種：</p>
      <ul>
        <li>Python</li>
        <li>C++</li>
        <li>Java</li>
        <li>PHP</li>
        <li>GoLand</li>
      </ul>
    </div>
    <p><button>點擊按鈕</button></p>
  </div>
</body>
</html>

在瀏覽器中的演示效果：

image

上圖中列出了所有 <body> 元素的后代元素榆骚。

遍歷同胞元素的方法

jQuery 中遍歷 DOM 樹中同胞元素的方法有下面幾種：

方法	描述
siblings()	返回指定元素的所有同胞元素
next()	返回指定元素的下一個同胞元素
nextAll()	返回指定元素的所有跟隨的同胞元素
nextUntil()	返回介于兩個給定參數(shù)之間的所有跟隨的同胞元素
prev()	返回指定元素的上一個同胞元素
prevAll()	返回指定元素的所有前面的同胞元素
prevUntil()	返回介于兩個給定參數(shù)之間的所有前面的同胞元素

siblings()方法

siblings() 方法可以獲得匹配集合中每個元素的同胞片拍，通過選擇器進行篩選是可選的。

示例：

例如輸出 sib 類選擇器的同胞元素：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_俠課島(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    $("button").click(function(){
      var tag = $(".sib").siblings().map(function(){
        return this.tagName;
      }).get().join('妓肢，');
      alert(tag);
    });
  });
</script>
</head>
<body>
  <div class="div_con">
    <h3>俠課島</h3>
    <div>
      <p class="sib">俠課島的課程有下面幾種：</p>
      <ul>
        <li>Python</li>
        <li>C++</li>
        <li>Java</li>
        <li>PHP</li>
        <li>GoLand</li>
      </ul>
    </div>
    <p><button>點擊按鈕</button></p>
  </div>
</body>
</html>

在瀏覽器中的演示效果：

image

next()方法

next() 方法返回被選元素的后一個同級元素捌省。

示例：

例如我們將 li_sib 類選擇器后面的一個元素顏色設(shè)置為紅色：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_俠課島(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    $(".li_sib").next().css({"color":"red"});
  });
</script>
</head>
<body>
  <div class="div_con">
    <h3>俠課島</h3>
    <div>
      <p class="sib">俠課島的課程有下面幾種：</p>
      <ul>
        <li>Python</li>
        <li class="li_sib">C++</li>
        <li>Java</li>
        <li>PHP</li>
        <li>GoLand</li>
      </ul>
    </div>
    <p><button>點擊按鈕</button></p>
  </div>
</body>
</html>

nextAll()方法

nextAll() 方法與 next() 方法的使用差不多。但是 nextAll() 方法用于返回被選元素之后的所有同級元素碉钠。

示例：

$(function(){
    $(".li_sib").nextAll().css({"color":"red"});
});

在瀏覽器中的演示效果：

image

nextUntil()方法

nextUntil() 方法返回兩個給定參數(shù)之間的每個元素之后的所有同級元素纲缓。

示例：

例如將 star 與 end 之間的元素的字體顏色設(shè)置為紅色：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_俠課島(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    $(".start").nextUntil(".end").css({"color":"red"});
  });
</script>
</head>
<body>
  <div class="div_con">
    <h3>俠課島</h3>
    <div>
      <p class="sib">俠課島的課程有下面幾種：</p>
      <ul>
        <li>Python</li>
        <li class="start">C++</li>
        <li>Java</li>
        <li>PHP</li>
        <li>GoLand</li>
        <li class="end">Node.js</li>
        <li>CSS</li>
      </ul>
    </div>
    <p><button>點擊按鈕</button></p>
  </div>
</body>
</html>

在瀏覽器中的演示效果：

image

prev()方法

prev() 方法與 next() 方法相反，用于返回指定元素的上一個同胞元素喊废。

示例：

將 star 的上一個元素字體顏色設(shè)置為紅色：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_俠課島(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    $(".start").prev().css({"color":"red"});
  });
</script>
</head>
<body>
  <div class="div_con">
    <h3>俠課島</h3>
    <div>
      <p class="sib">俠課島的課程有下面幾種：</p>
      <ul>
        <li>Python</li>
        <li class="start">C++</li>
        <li>Java</li>
        <li>PHP</li>
        <li>GoLand</li>
        <li class="end">Node.js</li>
        <li>CSS</li>
      </ul>
    </div>
    <p><button>點擊按鈕</button></p>
  </div>
</body>
</html>

在瀏覽器中的演示效果：

image

prevAll()方法

prevAll() 方法與 nextAll 方法相反祝高，用于返回指定元素的所有前面的同胞元素。

示例：

將 end 類選擇器之前的所有元素字體顏色設(shè)置為紅色：

$(function(){
    $(".end").prevAll().css({"color":"red"});
});

在瀏覽器中的演示效果：

image

prevUntil()方法

prevUntil() 方法用于返回介于兩個給定參數(shù)之間的所有前面的同胞元素污筷。

示例：

$(function(){
    $(".start").prevUntil("end").css({"color":"red"});
});

在瀏覽器中的演示效果：

image

鏈接：https://www.9xkd.com/

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末工闺，一起剝皮案震驚了整個濱河市，隨后出現(xiàn)的幾起案子瓣蛀，更是在濱河造成了極大的恐慌斤寂，老刑警劉巖，帶你破解...
沈念sama閱讀 217,185評論 6贊 503
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件揪惦，死亡現(xiàn)場離奇詭異遍搞，居然都是意外死亡，警方通過查閱死者的電腦和手機器腋，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 92,652評論 3贊 393
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門溪猿，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人纫塌，你說我怎么就攤上這事诊县。” “怎么了措左？”我有些...
開封第一講書人閱讀 163,524評論 0贊 353
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵依痊，是天一觀的道長。經(jīng)常有香客問我，道長胸嘁，這世上最難降的妖魔是什么瓶摆？我笑而不...
開封第一講書人閱讀 58,339評論 1贊 293
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮性宏，結(jié)果婚禮上群井，老公的妹妹穿的比我還像新娘。我一直安慰自己毫胜，他們只是感情好书斜，可當(dāng)我...
茶點故事閱讀 67,387評論 6贊 391
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布。她就那樣靜靜地躺著酵使，像睡著了一般荐吉。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發(fā)上口渔，一...
開封第一講書人閱讀 51,287評論 1贊 301
城市分裂傳說
那天样屠，我揣著相機與錄音，去河邊找鬼搓劫。笑死瞧哟，一個胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的枪向。我是一名探鬼主播勤揩，決...
沈念sama閱讀 40,130評論 3贊 418
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼秘蛔！你這毒婦竟也來了陨亡？” 一聲冷哼從身側(cè)響起，我...
開封第一講書人閱讀 38,985評論 0贊 275
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤深员，失蹤者是張志新（化名）和其女友劉穎负蠕，沒想到半個月后，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體倦畅，經(jīng)...
沈念sama閱讀 45,420評論 1贊 313
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡遮糖，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點故事閱讀 37,617評論 3贊 334
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時候發(fā)現(xiàn)自己被綠了叠赐。大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片欲账。...
茶點故事閱讀 39,779評論 1贊 348
活死人
序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖芭概，靈堂內(nèi)的尸體忽然破棺而出赛不，到底是詐尸還是另有隱情，我是刑警寧澤罢洲，帶...
沈念sama閱讀 35,477評論 5贊 345
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布踢故，位于F島的核電站，受9級特大地震影響，放射性物質(zhì)發(fā)生泄漏殿较。R本人自食惡果不足惜耸峭，卻給世界環(huán)境...
茶點故事閱讀 41,088評論 3贊 328
男人毒藥：我在死后第九天來索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望斜脂。院中可真熱鬧抓艳，春花似錦触机、人聲如沸帚戳。這莊子的主人今日做“春日...
開封第一講書人閱讀 31,716評論 0贊 22
一樁弒父案儡首，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽片任。三九已至，卻和暖如春蔬胯，著一層夾襖步出監(jiān)牢的瞬間对供，已是汗流浹背。一陣腳步聲響...
開封第一講書人閱讀 32,857評論 1贊 269
情欲美人皮
我被黑心中介騙來泰國打工氛濒，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留产场，地道東北人。一個月前我還...
沈念sama閱讀 47,876評論 2贊 370
代替公主和親
正文我出身青樓舞竿，卻偏偏與公主長得像京景，于是被迫代替她去往敵國和親。傳聞我的和親對象是個殘疾皇子骗奖，可洞房花燭夜當(dāng)晚...
茶點故事閱讀 44,700評論 2贊 354

jQuery 遍歷

遍歷DOM

示例：

遍歷祖先元素的方法

parents()方法

示例：

parents()方法

示例：

parentsUntil()方法

示例：

遍歷后代元素的方法

children()方法

示例：

find()方法

示例：

遍歷同胞元素的方法

siblings()方法

示例：

next()方法

示例：

nextAll()方法

示例：

nextUntil()方法

示例：

prev()方法

示例：

prevAll()方法

示例：

prevUntil()方法

示例：

推薦閱讀更多精彩內(nèi)容