jQuery選擇語法問題

Question

我會遇到以下語法：

$('#sourcePane input:checked~img'); 

我知道它是選擇檢查，並且還根據ID = sourcePane的元件的所有輸入元素？對？

但是〜img是什麼？ 〜做什麼？

也，在HTML中的相應元素是

<div data-module="Sources" data-module-id="sourcePane">

爲什麼不能ID = 「sourcePane」，但數據模塊-ID = 「sourcePane」 ??

Answer 1

A〜B

這是CSS 3一般兄弟組合子。這意味着「選擇所有b元素是a的下一個兄弟元素」。它的工作方式與鄰接兄弟組合器a + b相似，但b不必緊隨其後。

數據 - 屬性

這是HTML5語法創建自定義屬性。從HTML5 spec：

自定義數據屬性是爲了存儲專用頁面或應用程序的定製數據，其中有沒有更合適的屬性或元素。

你的選擇不會工作，除非你要麼你的HTML更改爲：

<div id="sourcePane" data-module="Sources" data-module-id="sourcePane"> 

或您的選擇更改爲：

$('[data-module-id="sourcePane"] input:checked~img'); 

Answer 2

'〜img'在輸入後選中一個帶有<img />標記的兄弟：checked。

（在這裏看到：http://api.jquery.com/next-siblings-selector/#prevsiblings）