jQuery查找——parent/parents/parentsUntil/closest

来源:http://www.cnblogs.com/chiangchou/archive/2016/06/01/jquery-parents.html
-Advertisement-
Play Games

jquery的parent(),parents(),parentsUntil(),closest()都是向上查找父級元素，具體用法不同 parent()：取得一個包含著所有匹配元素的唯一父元素的元素集合。 parents()：沿 DOM 樹向上遍歷，直到文檔的根元素(<html>)為止，將每個祖先元 ...


jquery的parent(),parents(),parentsUntil(),closest()都是向上查找父級元素，具體用法不同

parent()：取得一個包含著所有匹配元素的唯一父元素的元素集合。

parents()：沿 DOM 樹向上遍歷，直到文檔的根元素(<html>)為止，將每個祖先元素添加到一個臨時的集合；如果應用了選擇器，則會基於該選擇器對這個集合進行篩選。返回零個、一個或多個元素。

closest()：沿 DOM 樹向上遍歷，直到找到已應用選擇器的一個匹配為止。返回零個或一個元素

parentsUntil()：查找當前元素的所有的父輩元素，直到遇到匹配的那個元素為止，但不包括那個選擇器匹配到的元素。跟parents類似，區別是不會查到根元素，遇到匹配的就停止了，同時不包括匹配到的那個元素。

註：這四個選擇器都返回一個數組，且為jQuery對象；但數組中的元素都不是jQuery對象，需要再次封裝它們才能使用Jquery提供的API

-----------------------------------------------------------------測試-----------------------------------------------------------------

基礎代碼：

註：下麵的測試會用$().css()進行測試，css()是jQuery的函數。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <script type="text/javascript" src="js/jquery-1.7.2.js" ></script>
 7         <script>
 8             $(function(){
 9                 //jquery
10             });
11             function changeColor(a){
12                 //changeColor
13             }
14         </script>
15     </head>
16     <body>
17         <ul class="level-1 yes">
18             <li class="item-i">I</li>
19             <li class="item-ii">II
20                 <ul class="level-2 yes">
21                     <li class="item-a">A</li>
22                     <li class="item-b">B
23                         <ul class="level-3">
24                             <li class="item-1">1</li>
25                             <li class="item-2">2</li>
26                             <li class="item-3">3</li>
27                             <li class="item-3"><a href="javascript:;" onclick="changeColor(this);">改變顏色</a></li>
28                         </ul>
29                     </li>
30                     <li class="item-c">C</li>
31                 </ul>
32             </li>
33             <li class="item-iii">III</li>
34         </ul>
35     </body>
36 </html>

 

效果圖：

 

一、parent()

1.表達式為空，會選擇上一級元素(唯一父級)。即<ul class="level-3">...</ul>

$("li.item-1").parent().css("border", "3px solid blue");

2.使用表達式選擇(直接父級)：跟上圖效果一樣。

$("li.item-1").parent(".level-3").css("border", "3px solid blue");

3.使用表達式選擇(非直接父級)：沒有效果

$("li.item-1").parent(".level-1").css("border", "3px solid blue");

4.選擇多個：選擇所有li的直接父級

$("li").parent().css("border", "3px solid blue");

5.根據表達式選擇多個：選擇li的直接父級且class="level-2"，這裡其實可以看做先選擇了所有li的父級，然後篩選出class='.level-2'的父級

$("li").parent(".level-2").css("border", "3px solid blue");

6.改變顏色：將<li class="item-b"></li>的邊框變為紅色，從<a>開始向上查找，只能一級一級地往上找到要匹配的元素。

$("a").parent().parent().parent().css("border", "3px solid red");

7.點擊改變顏色：設置<li class="item-b"></li>的邊框為紅色。效果跟上圖一樣。

function changeColor(a){
    $(a).parent().parent().parent().css("border", "3px solid red");
}

8.將parent()返回數組的第一個元素的邊框設置為紅色：

選擇li的父標簽ul:這裡返回3個元素

$("li").parent("ul").css("border", "3px solid blue");

代碼如下：顏色不變，效果跟上面一樣。使用的是rets[0].css()。

$("li").parent("ul").css("border", "3px solid blue");
var rets = $("li").parent("ul");
rets[0].css("border", "3px solid red");

顏色改變：這裡包裝了第一個元素，與上面的對比說明：parent()返回的數組的元素不是jQuery對象。

$("li").parent("ul").css("border", "3px solid blue");
var rets = $("li").parent("ul");
$(rets[0]).css("border", "3px solid red");

 

二、parents()

1.無表達式：沿DOM樹向上遍歷，直到文檔的根元素(</html>)為止，可以看到逐級向上選擇所有的父級元素。

$("li.item-1").parents().css("border", "3px solid blue");

2.表達式：選擇class="yes"的父級。註意這裡實際上是，將每個祖先元素先添加到一個臨時的集合，然後根據表達式對這個集合進行篩選。parents()相當於是可以跳級選擇。

$("li.item-1").parents(".yes").css("border", "3px solid blue");

 

3.點擊改變顏色：設置<li class="item-b"></li>邊框顏色為紅色，可以直接選取該元素進行操作.

function changeColor(a){
    $(a).parents(".item-b").css("border", "3px solid red");
}

4.將數組中的第一個元素邊框設置為紅色：

選擇的元素：返回的數組中有三個元素。

$("li.item-1").parents("ul").css("border", "3px solid blue");

將數組中的第一個元素邊框設置為紅色：使用的是rets[0].css()，效果跟上圖一樣，沒有任何改變。

$("li.item-1").parents("ul").css("border", "3px solid blue");
var rets = $("li.item-1").parents("ul");
rets[0].css("border", "3px solid red");

將數組中的第一個元素邊框設置為紅色：包裝後在操作：$(rets[0]).css()，顏色改變。

同上面的對比說明：parents()返回的數組中的不是jQuery對象。

$("li.item-1").parents("ul").css("border", "3px solid blue");
var rets = $("li.item-1").parents("ul");
$(rets[0]).css("border", "3px solid red");

 

三、parentsUntil()

1.無表達式：因為沒有表達式，效果跟無表達式的parents()一樣，沿DOM樹向上遍歷，直到文檔的根元素(<html>)為止

$("li.item-1").parentsUntil().css("border", "3px solid blue");

2.表達式：

層級關係：<li class="item-1"> -- <ul class="level-3"> -- <li class="item-b"> -- <ul class="level-2 yes">

這裡從item-1往上找level-2，可以看出，level-2沒有被選中，被選中的是item-1的父級level-3和item-b。

所以，parentsUntil()查找當前元素的所有的父輩元素，直到遇到匹配的那個元素為止，但不包括那個選擇器匹配到的元素。跟parents類似，區別是不會查到根元素，遇到匹配的就停止了，同時不包括匹配到的那個元素。

所以，如果你想用parentsUntil()直接查找某個元素是不行的，可以用parents()。

這裡要註意：parentsUntil()返回的是一個數組，而不是單個對象。parentsUntil返回的數組中剛好不包括滿足表達式條件的對象。感覺這兩點很容易讓人誤解。

$("li.item-1").parentsUntil(".level-2").css("border", "3px solid blue");

3.表達式：這裡可以看做，先選擇了level-2下的所有父級元素(即level-3，item-b)，然後再篩選出level-3

$("li.item-1").parentsUntil(".level-2",".level-3").css("border", "3px solid blue");

4.點擊改變顏色：將item-b下的a的父級的邊框都改變了，但不包括item-b本身。

function changeColor(a){
     $(a).parentsUntil(".item-b").css("border", "3px solid red");
}

6.將數組中第一個元素邊框設置為紅色：

選擇元素：返回的數組中有4個元素。

註意：如果這裡這樣選擇$("li.item-1").parentsUntil("ul")，是不會選中任何元素的。這裡應該和parents()相區別。

$("li.item-1").parentsUntil("ul.level-1").css("border", "3px solid blue");

改變第一個元素的邊框顏色：這裡使用的是parents[0]。效果跟上圖一樣，沒有變！！

$("li.item-1").parentsUntil("ul.level-1").css("border", "3px solid blue");
var parents = $("li.item-1").parentsUntil("ul.level-1");
parents[0].css("border", "3px solid red");

將數組中的元素包裝後的效果：這裡使用的是$(parents[0]).css()。

同上面的對比，說明parentsUntil()返回的數組中的元素不是jQuery對象。

$("li.item-1").parentsUntil("ul.level-1").css("border", "3px solid blue");
var parents = $("li.item-1").parentsUntil("ul.level-1");
$(parents[0]).css("border", "3px solid red");

 

四、closest()

1.無表達式：沒有表達式是不會選擇任何元素的。因為closest()是從當前元素開始沿DOM 樹向上，獲得匹配表達式的第一個祖先元素，返回0個或者一個元素。

$("li.item-1").closest().css("border", "3px solid blue");

2.表達式：查找<ul class="level-2 yes">。我想這就是我們會常用的功能了。跟parents()類似，但parents返回的是數組。註意和parents的區別

$("li.item-1").closest("ul.level-2").css("border", "3px solid blue");

 

總結：一般來說用closest()和parents()就夠了！parentsUntil()容易讓人誤解為只選擇一個元素...

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Javascript字元串拼接小技巧
    在Javascript中經常會遇到字元串的問題，但是如果要拼接的字元串過長就比較麻煩了。 如果是在一行的，可讀性差不說，如果要換行的，會直接報錯。 在此介紹幾種Javascript拼接字元串的技巧. 字元串相加(+) 利用反斜線拼接字元串 利用數組拼接字元串 利用數組的join方法，把數組轉成字元串 ...
  • style currentStyle getComputedStyle的區別和用法
    先介紹下層疊樣式表的三種形式: 1.內聯樣式，在html標簽中style屬性設置。 2.嵌入樣式，通過在head標簽設置style標簽添加樣式。 3.外部樣式，通過link標簽引入外部樣式 進入正題。 style屬性獲取樣式值，使用方法：obj.style.attr style只能獲取元素的內聯樣式 ...
  • Javascript面試題淺析
    分享幾道JavaScript相關的面試題. 字元串反轉 這這裡提供了兩種解題思路。如果各位讀者還有其他的思路，可以分享交流！ 第一方法： 第二種方法： 編寫一個JavaScript函數 parseQueryString，它的用途是把URL參數解析為一個對象，如：var url = “http://w ...
  • Ajax的get和post請求
    1.get請求 function () { //向伺服器請求 時間 //1.創建非同步對象（小瀏覽器，後臺線程） var xhr = new XMLHttpRequest(); //2.設置參數，true表示使用非同步模式 xhr.open("get", "GetTime.ashx?name= Mr靖" ...
  • SearchFlight_Joker
    SearchFlight ...
  • 100+經典常用的jQuery插件大全實例演示和下載
    jQuery 表單插件 jQuery cxCalendar 日期選擇器 jQuery cxColor 顏色選擇器 jQuery cxSelect 聯動下拉菜單 jQuery Validation Engine 表單驗證 jQuery soColorPacker 網頁拾色器 jQuery AutoCo ...
  • 第 31 章 項目實戰-PC 端固定佈局[4]
    學習要點： 1.熱門旅游區 2.標題介紹區 3.旅游項目區 主講教師：李炎恢 本章主要開始使用學慣用 HTML5 和 CSS3 來構建 Web 頁面，第一個項目採用 PC 端固定佈局來實現。 一．熱門旅游區 本節課，我們將探討一下首頁最核心的部分，旅游區。這塊內容由兩個部分組成，一個是大標題，表示熱 ...
  • javascript基礎語法——變數和標識符
    [1]定義 [2]命名規則 [3]變數聲明 [4]變數特性 [5]變數作用域 [6]聲明提升(hoisting) [7]屬性變數 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類