Jquery's selector is incredibly powerful. Here is a simple summary of common element search methods.
$ ("A B") searches for all subnodes under Element A, including non-direct subnodes.
$ ("A> B") Find the direct subnode under Element
$ ("A + B") searches for the sibling nodes behind Element A, including non-direct subnodes.
$ ("~ B ") Find the sibling nodes behind Element A, excluding non-direct subnodes.
1. $ ("a B") searches for all subnodes under Element A, including non-direct subnodes.
Example: Find all input elements in the form
HtmlCode:
<Form>
<Label> name: </label>
<Input name = "name"/>
<Fieldset>
<Label> Newsletter: </label>
<Input name = "newsletter"/>
</Fieldset>
</Form>
<Input name = "NONE"/>
Jquery code:
$ ("Form input ")
Result:
[<Input name = "name"/>, <input name = "newsletter"/>]
2. $ ("A> B") Find the direct subnode under Element
Example: match all the child input elements in the form.
HTML code:
<Form>
<Label> name: </label>
<Input name = "name"/>
<Fieldset>
<Label> Newsletter: </label>
<Input name = "newsletter"/>
</Fieldset>
</Form>
<Input name = "NONE"/>
Jquery code:
$ ("Form> input ")
Result:
[<Input name = "name"/>]
3. $ ("A + B") searches for the sibling nodes behind Element A, including non-direct subnodes.
Example: match all input elements following the label
HTML code:
<Form>
<Label> name: </label>
<Input name = "name"/>
<Fieldset>
<Label> Newsletter: </label>
<Input name = "newsletter"/>
</Fieldset>
</Form>
<Input name = "NONE"/>
Jquery code:
$ ("Label + input ")
Result:
[<Input name = "name"/>, <input name = "newsletter"/>]
4. $ ("~ B ") Find the sibling nodes behind Element A, excluding non-direct subnodes.
Example: Find all input elements of the same generation as the form
HTML code:
<Form>
<Label> name: </label>
<Input name = "name"/>
<Fieldset>
<Label> Newsletter: </label>
<Input name = "newsletter"/>
</Fieldset>
</Form>
<Input name = "NONE"/>
Jquery code:
$ ("Form ~ Input ")
Result:
[<Input name = "NONE"/>]