快捷導(dǎo)航

jQuery 選擇器項目實例分析及實現(xiàn)代碼

更新時間：2012年12月28日 15:53:52 作者：

首先廢話一句，jQuery選擇器真心很強(qiáng)大！接下來詳細(xì)介紹jQuery 選擇器項目實例實現(xiàn)方式

首先廢話一句，jQuery選擇器真心很強(qiáng)大！
在項目中遇到這么一個問題easyui的問題

如圖所示，當(dāng)前頁面顯示的是“原始報文查詢”的頁面，當(dāng)時左側(cè)導(dǎo)航欄卻選中的是“重發(fā)報文查詢”。如何讓右側(cè)的菜單和左側(cè)的導(dǎo)航實現(xiàn)聯(lián)動即：左側(cè)點擊“原始報文查詢”，那么右側(cè)的“補(bǔ)發(fā)運抵報文”展開，并選中“原始報文查詢”，“后臺管理”關(guān)閉？
實現(xiàn)方式如下：
1、右側(cè)的“原始報文查詢”等用到的是easyui的tabs控件，查看api知道，tabs有個onSelect方法，只要在onSelect方法中寫入自己想做的事情就可以了。
2、觸發(fā)事件是找到了，那么具體怎么實現(xiàn)想要的效果呢？

　
左側(cè)導(dǎo)航欄代碼結(jié)果如上圖：最外層是easyui的accordion控件，accordion里有很多pannel，一個pannel對應(yīng)圖1中的一個父目錄和其下面的子目錄，比如“補(bǔ)發(fā)運運抵報告”這一模塊。panel里有兩個div，
第一個div是父目錄，第二個div里包含了很多子目錄。
首先實現(xiàn)選中右側(cè)的tabs時，左側(cè)對應(yīng)的導(dǎo)航條被選中。先取出所有子目錄的選中狀態(tài)，然后讓當(dāng)前子目錄被選中。

復(fù)制代碼代碼如下:

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

3、問題是該選中的是選中了，但選中的子菜單的父菜單并沒有展開。easyui中的panel有個expand方法，但是怎樣知道哪個panel（既父菜單）應(yīng)該展開呢？如圖2所示：一直選中了“原始報文查詢”，現(xiàn)在要讓補(bǔ)發(fā)運抵報告這個父菜單展開。“原始報文查詢“所在的元素span的祖先節(jié)點的兄弟節(jié)點的第一個子節(jié)點才是”補(bǔ)發(fā)運抵報告“所在的節(jié)點。

復(fù)制代碼代碼如下:

 
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'); 
} 

首先在id為idaccordion的子孫節(jié)點中查找包含文本為title的span（即<span class="icon icon-users"> 原始報文查詢</span>），然后找到最近的class為panel-body的祖先節(jié)點，然后找到這個節(jié)點的前一個兄弟節(jié)點（即<div class="panel-header accordion-header accordion-header-selected" style="height: 15px; width: 161px;">），然后找到這個節(jié)點的類為panel-title的子節(jié)點，就獲取到了這個節(jié)點的文本，即”補(bǔ)發(fā)運抵報告“。
整體代碼如下：

復(fù)制代碼代碼如下:

 
//當(dāng)右側(cè)選擇某個tab時，左邊對應(yīng)的菜單也被選中，且這個菜單所在的accordion展開，其他的accordion關(guān)閉 
$('#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，兩者的區(qū)別如下：
parents([expr])
取得一個包含著所有匹配元素的祖先元素的元素集合（不包含根元素）?？梢酝ㄟ^一個可選的表達(dá)式進(jìn)行篩選。
代碼如下

復(fù)制代碼代碼如下:

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

closest會首先檢查當(dāng)前元素是否匹配，如果匹配則直接返回元素本身。如果不匹配則向上查找父元素，一層一層往上，直到找到匹配選擇器的元素。如果什么都沒找到則返回一個空的jQuery對象。

復(fù)制代碼代碼如下:

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

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

您可能感興趣的文章: