快捷導(dǎo)航

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

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

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

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

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

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

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

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

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

復(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é)點(diǎn)中查找包含文本為title的span（即<span class="icon icon-users"> 原始報(bào)文查詢(xún)</span>），然后找到最近的class為panel-body的祖先節(jié)點(diǎn)，然后找到這個(gè)節(jié)點(diǎn)的前一個(gè)兄弟節(jié)點(diǎn)（即<div class="panel-header accordion-header accordion-header-selected" style="height: 15px; width: 161px;">），然后找到這個(gè)節(jié)點(diǎn)的類(lèi)為panel-title的子節(jié)點(diǎn)，就獲取到了這個(gè)節(jié)點(diǎn)的文本，即”補(bǔ)發(fā)運(yùn)抵報(bào)告“。
整體代碼如下：

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

 
//當(dāng)右側(cè)選擇某個(gè)tab時(shí)，左邊對(duì)應(yīng)的菜單也被選中，且這個(gè)菜單所在的accordion展開(kāi)，其他的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'); 
} 
} 
}); 

平時(shí)用的比較少的是closest方法,該方法可以獲取某個(gè)元素最近的父元素，還有一個(gè)類(lèi)似的方法parents，兩者的區(qū)別如下：
parents([expr])
取得一個(gè)包含著所有匹配元素的祖先元素的元素集合（不包含根元素）?？梢酝ㄟ^(guò)一個(gè)可選的表達(dá)式進(jìn)行篩選。
代碼如下

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

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

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

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

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

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

您可能感興趣的文章: