jQuery選擇器：選擇器的順序很重要嗎？

我有一個html文件，看起來像這樣：jQuery選擇器：選擇器的順序很重要嗎？

<div id="panel_comments"> 
    <table id="panel_comments_table"> 
    <tr> 
     <td style="width: 150px;">Monday: </td> 
     <td><textarea id="panel_comments_monday" rows="4" cols="60" >Monday comment area</textarea></td> 
    </tr> 
    .. same with the other 6 weekdays 
    </table> 
</div>

現在，如果我要選擇所有文字區域，我會做以下，這是一個自然語言：give me all elements which are textareas, with the following ids：

$("textarea [id^=panel_comments_]")

但它給了我一個空的結果。相反，我必須重新安排這樣的選擇，這是一個自然語言give me all elements with the ids, and which are textareas：

$("[id^=panel_comments_] textarea")

爲什麼會出現排序中選擇的事？

來源

2013-05-29 Manuel

確保您不使用相同的ID –

的空間是顯著這裏，它是descendant selector。只要忽略它：

textarea[id^=panel_comments_]

爲什麼[id^=panel_comments_] textarea似乎工作的原因是，它選擇與ID panel_comments的div元素，然後發現是它的後代所有文字區域。所以，這隻適用於「意外」，因爲div和textarea具有相似的ID。如果你給div元素一個完全不同的ID，它不會奏效。

CSS選擇器的層次結構的工作，如HTML，所以它是唯一合理的是，「子選擇」事項的順序。

只有當你不想要表達元素之間的關係，the order almost doesn't matter：

一個簡單的選擇要麼是類型選擇或通用選擇零個或多個屬性選擇緊隨其後，ID選擇器或僞類，以任何順序。

來源

2013-05-29 09:46:24

這真的是一個'事故'，它的工作相反。 Thx，尤其是鏈接。 – Manuel

你要這個，沒有多餘的空間：

$("textarea[id^=panel_comments_]")

使用空間：$("textarea [id^=panel_comments_]")手段選擇裏面textarea的ID的所有元素。

使用：$("[id^=panel_comments_] textarea")表示選擇ID爲從選擇器字符串開始的元素內的所有textarea。

繼BoltClock的評論，類型選擇必須在任何額外的過濾選擇，這意味着之前被使用：

$("textarea[id^=panel_comments_]")有效
$("[id^=panel_comments_]textarea")無效

來源

2013-05-29 09:46:04

另外幾個要素結束了，你可以重新選擇一個鏈中以任意順序，除了一個類型選擇像'textarea'一定要先來。 – BoltClock

$("textarea[id^=panel_comments_]")

刪除多餘的空間

來源

2013-05-29 09:46:30

jQuery選擇器：選擇器的順序很重要嗎？

回答

相關問題