Вопрос о синтаксисе селектора Jquery

Question

Я сталкиваюсь со следующим синтаксисом:

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

Я знаю, что он выбирает все входные элементы, которые проверены, а также под элементом id = sourcePane? право?

Но что такое ~ img? что делает ~

также, соответствующий элемент в HTML равен

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

Почему это не id = "sourcePane", а data-module-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 /> после ввода: проверено.

(см. Здесь: http://api.jquery.com/next-siblings-selector/#prevsiblings)