天天看點

《jQuery Cookbook中文版》——1.9 根據目前上下文周遊DOM獲得新的DOM元素集

本節書摘來自異步社群《jquery cookbook中文版》一書中的第1章,第1.9節,作者:【美】jquery社群專家組 譯者:姚軍 , 孫博更多章節内容可以通路雲栖社群“異步社群”公衆号檢視。

1.9.1 問題

你已經選擇了一組dom元素,根據選擇集在dom結構樹中的位置,你打算周遊dom獲得一個新的元素集以供操作。

1.9.2 解決方案

jquery提供一組方法,可以根據目前選擇的dom元素的上下文周遊dom。

例如,檢視如下的html片段:

《jQuery Cookbook中文版》——1.9 根據目前上下文周遊DOM獲得新的DOM元素集

現在,用:eq()索引自定義選擇器選擇第2個

《jQuery Cookbook中文版》——1.9 根據目前上下文周遊DOM獲得新的DOM元素集

元素:

//根據索引選擇

《jQuery Cookbook中文版》——1.9 根據目前上下文周遊DOM獲得新的DOM元素集

集合中的第2個元素,索引從0開始

現在有一個上下文——html結構中的一個出發點。出發點是第2個

《jQuery Cookbook中文版》——1.9 根據目前上下文周遊DOM獲得新的DOM元素集

元素。從這裡開始,可以到達任何位置——對,幾乎任何位置。

讓我們來看看,使用幾個jquery提供的dom周遊方法能夠到達哪裡。代碼中的注釋就能說明問題:

記住,這些周遊方法産生新的包裝器集,使用end()可以傳回前一個包裝器集。

1.9.3 讨論

目前為止介紹的周遊方法展示了簡單周遊。要了解周遊,還必須知道另外兩個重要的概念。

第一個概念可能顯而易見——周遊方法可以連結。我們再來看看前面出現過的jquery語句:

注意,我已經從第二個

《jQuery Cookbook中文版》——1.9 根據目前上下文周遊DOM獲得新的DOM元素集

元素周遊到父元素,然後再從父元素選擇的所有子元素。jquery包裝器集現在包含的是中的所有

《jQuery Cookbook中文版》——1.9 根據目前上下文周遊DOM獲得新的DOM元素集

元素。當然,這隻是為了說明周遊方法而設計的例子。如果我們想要的是一個隻

《jQuery Cookbook中文版》——1.9 根據目前上下文周遊DOM獲得新的DOM元素集

元素的包裝器集,從一開始就選擇所有

《jQuery Cookbook中文版》——1.9 根據目前上下文周遊DOM獲得新的DOM元素集

元素要簡單得多(例如,jquery('li'))。

處理周遊方法時需要牢記的第二個概念是許多方法都接受一個可選的參數,用于過濾選擇集。我們仍然用連結的示例來說明這一點,看看如何修改代碼,以便隻選擇最後一個

元素。别忘了,這個例子僅僅用來說明周遊方法如何傳遞用于選擇特定元素的表達式:

jquery還提供了其他周遊方法,在這裡不作介紹。在本書裡你将會看到這些周遊方法。

繼續閱讀