javascript - 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 通用兄弟组合器。它的意思是“选择所有与 a 相邻的 b 元素。”。它的工作方式类似于相邻兄弟组合器 a + b，但 b 不必紧跟在 a 之后。

data- 属性

这是用于创建自定义属性的 HTML5 语法。来自HTML5 spec :

Custom data attributes are intended to store custom data private to the page or application, for which there are no more appropriate attributes or elements.

除非您将 HTML 更改为:

，否则您的选择器将不起作用:

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

或将您的选择器更改为:

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