jQuery 選擇器專案實例分析及實作程式碼_jquery

首先廢話一句，jQuery選擇器真心很強大！
在專案中遇到這麼一個問題easyui的問題
 
如圖所示，目前頁面顯示的是「原始報文查詢」的頁面，當時左側導覽列卻選取的是「重發報文查詢」。如何讓右側的選單和左側的導航實現聯動即：左側點擊“原始報文查詢”，那麼右側的“補發運抵報文”展開，並選中“原始報文查詢”，“後台管理”關閉？
實作方式如下：
1、右側的「原始報文查詢」等用到的是easyui的tabs控件，查看api知道，tabs有個onSelect方法，只要在onSelect方法中寫入自己想做的事情就可以了。
2、觸發事件是找到了，那麼具體怎麼實現想要的效果呢？
 　
左側導覽列程式碼結果如上圖：最外層是easyui的accordion控件，accordion裡有很多pannel，一個pannel對應圖1中的一個父目錄和其下面的子目錄，例如「補發運運抵報告」這一模組。 panel裡有兩個div，
第一個div是父目錄，第二個div裡包含了很多子目錄。
先實作選取右側的tabs時，左側對應的導覽條被選取。先取出所有子目錄的選取狀態，然後讓目前子目錄被選取。

複製程式碼 程式碼如下:

$('#idaccordion li div').removeClass( "selected");
$('#idaccordion span:contains("' title '")').parent().parent().addClass("selected");

3.問題是該選取的是選取的是選取了，但選取的子選單的父選單的父選單並沒有展開。 easyui中的panel有個expand方法，但是怎麼知道哪個panel（既父選單）應該展開呢？如圖2所示：一直選取了“原始報文查詢”，現在要讓補發運抵報告這個父選單展開。 「原始報文查詢「所在的元素span的祖先節點的兄弟節點的第一個子節點才是」補發運抵報告「所在的節點。

複製程式碼 程式碼如下:

if( $('#idaccordion sp3:contains("an ' title '")').length > 0 ){
var accordionTitle = $('#idaccordion span:contains("' title '")').closest('.panel-body').prev() .find('.panel-title').text();
var p = $('#idaccordion').accordion('getPanel',accordionTitle);
p.panel('expand');
}

首先在id為idaccordion的子孫節點中尋找包含文字為title的span（即 原始報文查詢 ），然後找到最近的class為panel-body的祖先節點，然後找到這個節點的前一個兄弟節點（即

），然後找到這個節點的類別為panel-title的子節點，就取得到了這個節點的文本，即」補發運抵報告「。
整體程式碼如下：

複製程式碼 程式碼如下:

程式碼如下：
//當右邊選擇某個tab時，左邊對應的選單也被選中，且這個選單所在的accordion展開，其他的accordion關閉
$('#tabs').tabs({
onSelect :function(title){
$('#idaccordion li div').removeClass("selected");
$('#idaccordion span:contains("' title '")').parent() .parent().addClass("selected");
if( $('#idaccordion span:contains("' title '")').length > 0 ){
var accordionTitle = $('# idaccordion span:contains("' title '")').closest('.panel-body').prev().find('.panel-title').text();
var p = $( '#idaccordion').accordion('getPanel',accordionTitle);
p.panel('expand');
}
}
});

平時用的比較少的是closest方法,該方法可以獲取某個元素最近的父元素，還有一個類似的方法parents，兩者的區別如下
：
parents([expr] )
取得一個包含所有符合元素的祖先元素的元素集合（不包含根元素）。可以透過一個可選的表達式進行篩選。
程式碼如下

複製程式碼

程式碼如下:

$('#items') .parents('.parent1');
closest([expr])

closest會先檢查當前元素是否匹配，如果匹配則直接傳回元素本身。如果不符合則向上尋找父元素，一層一層往上，直到找到符合選擇器的元素。如果什麼都沒找到則回傳一個空的jQuery物件。

複製程式碼 程式碼如下:

$('#items1').closest('. parent1');

closest和parents的主要區別是：1，前者從當前元素開始匹配尋找，後者從父元素開始匹配尋找；2，前者逐級向上查找，直到發現匹配的元素後就停止了，後者一直向上查找直到根元素，然後把這些元素放進一個臨時集合中，再用給定的選擇器表達式去過濾；3，前者返回0或1個元素，後者可能包含0 個，1個，或多個元素。
closest對於處理事件委派非常有用。