I encounter the following syntax:
$('#sourcePane input:checked~img');
I know it is selecting all input elements that are checked and also under the element of id= sourcePane ? right?
But what is ~img? what does ~ do?
also, the corresponding element in HTML is
<div data-module="Sources" data-module-id="sourcePane">
Why is it not id="sourcePane" but data-module-id="sourcePane" ??
a ~ b
This is the CSS 3 general sibling combinator. It means "Select all b elements that are next siblings to a.". It works like the adjacent sibling combinator a + b, but b does not have to immediately follow a.
data- Attributes
This is HTML5 syntax to create custom attributes. From the 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.
Your selector will not work unless you either change your HTML to:
<div id="sourcePane" data-module="Sources" data-module-id="sourcePane">
or change your selector to:
$('[data-module-id="sourcePane"] input:checked~img');
The '~img' selects a sibling with the <img /> tag after the input:checked.
(see here: http://api.jquery.com/next-siblings-selector/#prevsiblings)
