CODEWITHSUNDEEP
javascriptjqueryhtml
Codier
Codier

Reputation: 2160

Jquery selector syntax question

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" ??

Upvotes: 4

Views: 475

Answers (2)

melhosseiny
melhosseiny

Reputation: 10144

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');

Upvotes: 5

Kranu
Kranu

Reputation: 2567

The '~img' selects a sibling with the <img /> tag after the input:checked.

(see here: http://api.jquery.com/next-siblings-selector/#prevsiblings)

Upvotes: 1

Related Questions