What's the difference between these two jQuery statements? They seem to do the same thing by getting all the children div tags.
$("#mainblock div")
$("#mainblock > div")
Descendant Selector :The descendant Selector selects all child elements of the selected parent element. In this example, the descendant selector selects all li of selected ul elements. 2. Direct Child Selector : This selector selects only the direct child of the selected element.
The descendant selector is a way to select elements that are located somewhere underneath other elements, according to the tree structure of the webpage. This selector is actually multiple selectors combined together, but separated by a space.
With jQuery you can traverse down the DOM tree to find descendants of an element. A descendant is a child, grandchild, great-grandchild, and so on.
$("#mainblock > div")
= the childs only level
$("#mainblock div")
= all the childs+ desendents.
Have a look at jQuery Selectors
Child Selector ("parent > child")
-
Hierarchy Selects all direct child elements specified by "child" of elements specified by "parent".
Descendant Selector ("ancestor descendant")
-
Hierarchy Selects all elements that are descendants of a given ancestor.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With