逗號分隔的選擇器列表？

Question

我此刻重構了一些代碼和所遇到的一個選擇：

jQuery("tr","#ctl00_MainContent_MyUserControl").each(function(i,row) { ... } 

它看起來像它的選擇在頁面上從用戶控制<tr>的（忽略的事實情況完全命名！）但它不是我熟悉的語法，在文檔中找不到任何內容。我希望它寫成：

$("#ctl00_MainContent_MyUserControl tr").each(function(i,row) { ... } 

誰能告訴我，如果有區別（細微的或以其他方式），我很想念這裏？

Answer 1

This selector選擇編號爲ctl00_MainContent_MyUserControl的元素中的所有tr元素。這與你的第二個例子完全一樣。

第二個參數爲第一個參數提供了一個上下文。還有更好的用例這樣的語法，例如：

function(el) { 
    $('tr', el).each(...); 
} 

哪裏el是您的網頁上的某些元素。在這種情況下，你不能使用第二種語法形式。

Answer 2

jQuery構造函數的第二個參數（當第一個是選擇器時）是上下文。

從API文檔

方面 DOM元素，文檔或jQuery的使用作爲背景

見http://api.jquery.com/jQuery/

Answer 3

這是完全一樣的。它也可以寫成：

$("#ctl00_MainContent_MyUserControl").find("tr").each(function(i,row) { ... } 

前者的語法可以在jQuery constructor documentation中看到。它基本上是「找到所有匹配第一個選擇器的元素，這是第二個匹配的第二個後裔」。

Answer 4

使用兩個參數調用jQuery()方法（selector和context）is equivalent tojQuery(context).find(selector)。因此：

jQuery("tr","#ctl00_MainContent_MyUserControl"); 

等於：

jQuery("#ctl00_MainContent_MyUserControl").find("tr"); 

這也恰好是相同的：

jQuery("#ctl00_MainContent_MyUserControl tr"); 

---

我個人的看法是，使用context只當您可以通過已選擇的元素時有意義（jQuery或DOM），而不是僅僅通過選擇器（String）。在這種情況下，我只是更喜歡模仿CSS選擇器：例如，#ctl00_MainContent_MyUserControl tr。