首先廢話一句，jQuery選擇器真心很強(qiáng)大！
在項(xiàng)目中遇到這么一個(gè)問題easyui的問題
 
如圖所示，當(dāng)前頁面顯示的是“原始報(bào)文查詢”的頁面，當(dāng)時(shí)左側(cè)導(dǎo)航欄卻選中的是“重發(fā)報(bào)文查詢”。如何讓右側(cè)的菜單和左側(cè)的導(dǎo)航實(shí)現(xiàn)聯(lián)動(dòng)即：左側(cè)點(diǎn)擊“原始報(bào)文查詢”，那么右側(cè)的“補(bǔ)發(fā)運(yùn)抵報(bào)文”展開，并選中“原始報(bào)文查詢”，“后臺管理”關(guān)閉？
實(shí)現(xiàn)方式如下：
1、右側(cè)的“原始報(bào)文查詢”等用到的是easyui的tabs控件，查看api知道，tabs有個(gè)onSelect方法，只要在onSelect方法中寫入自己想做的事情就可以了。
2、觸發(fā)事件是找到了，那么具體怎么實(shí)現(xiàn)想要的效果呢？
 　
左側(cè)導(dǎo)航欄代碼結(jié)果如上圖：最外層是easyui的accordion控件，accordion里有很多pannel，一個(gè)pannel對應(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è)對應(yīng)的導(dǎo)航條被選中。先取出所有子目錄的選中狀態(tài)，然后讓當(dāng)前子目錄被選中。

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

首先在id為idaccordion的子孫節(jié)點(diǎn)中查找包含文本為title的span（即<span class="icon icon-users"> 原始報(bào)文查詢</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)的類為panel-title的子節(jié)點(diǎn)，就獲取到了這個(gè)節(jié)點(diǎn)的文本，即”補(bǔ)發(fā)運(yùn)抵報(bào)告“。
整體代碼如下：

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

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

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

最新評論