jQuery 選擇器專案例項

2022-03-18 07:02:45 字數 2286 閱讀 9107

首先廢話一句,jquery選擇器真心很強大!

在專案中遇到這麼乙個問題easyui的問題

圖1 如圖所示,當前頁面顯示的是「原始報文查詢」的頁面,當時左側導航欄卻選中的是「重發報文查詢」。如何讓右側的選單和左側的導航實現聯動即:左側點選「原始報文查詢」,那麼右側的「補發運抵報文」展開,並選中「原始報文查詢」,「後台管理」關閉?

實現方式如下:

1、右側的「原始報文查詢」等用到的是easyui的tabs控制項,檢視api知道,tabs有個onselect方法,只要在onselect方法中寫入自己想做的事情就可以了。

2、觸發事件是找到了,那麼具體怎麼實現想要的效果呢?  

圖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 span:contains("'+title+'")').length > 0)
首先在id為idaccordion的子孫節點中查詢包含文字為title的span(即

class="icon icon-users"

>

原始報文查詢

span>),然後找到最近的class為panel-body

的祖先節點,然後找到這個節點的前乙個兄弟節點(即

class="panel-header accordion-header accordion-header-selected"

style="height: 15px; width: 161px;"

>

),然後找到這個節點的類為panel-title的子節點,就獲取到了這個節點的文字,即」補發運抵報告「。

整體**如下:

//

當右側選擇某個tab時,左邊對應的選單也被選中,且這個選單所在的accordion展開,其他的accordion關閉

$('#tabs').tabs(

}});

平時用的比較少的是closest方法,該方法可以獲取某個元素最近的父元素,還有乙個類似的方法parents,兩者的區別如下:

parents([expr])

取得乙個包含著所有匹配元素的祖先元素的元素集合(不包含根元素)。可以通過乙個可選的表示式進行篩選。

**如下

$('#items').parents('.parent1');

closest([expr])

closest會首先檢查當前元素是否匹配,如果匹配則直接返回元素本身。如果不匹配則向上查詢父元素,一層一層往上,直到找到匹配選擇器的元素。如果什麼都沒找到則返回乙個空的jquery物件。

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

closest和parents的主要區別是:1,前者從當前元素開始匹配尋找,後者從父元素開始匹配尋找;2,前者逐級向上查詢,直到發現匹配的元素後 就停止了,後者一直向上查詢直到根元素,然後把這些元素放進乙個臨時集合中,再用給定的選擇器表示式去過濾;3,前者返回0或1個元素,後者可能包含0 個,1個,或者多個元素。

closest對於處理事件委派非常有用。

jQuery 選擇器例項

選擇器 例項選取 所有元素 id lastname id lastname 的元素 class intro 所有 class intro 的元素 element p 所有 元素 class.class intro.demo 所有 class intro 且 class demo 的元素 first ...

jquery選擇器所有例項

id為one div id為two class是 mini div class是 mini class是 one 這是隱藏的 class是 mini class是 mini class是 one class是 mini01 class是 mini 這是隱藏的 動畫 元素的值 id b1 元素的值 i...

jQuery選擇器例項手冊

選擇器 例項選取 所有元素 id lastname id lastname 的元素 class intro 所有 class intro 的元素 element p 所有 元素 class.class intro.demo 所有 class intro 且 class demo 的元素 first ...