What is the difference direct descendent (>) vs. descendant in jQuery selectors?

Question

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\")


        

Answer 1

$("#mainblock div") find all the divs under #mainblock

$("#mainblock > div") only found its child

suppose you have below HTML structure:

    <div id="mainblock"> 
      <div>
        <div></div> 
        <div></div>
      </div>
     <div></div>
     <div></div>
   </div>

Then

$("#mainblock div").length = 5
$("#mainblock > div").length = 3

Answer 2

$("#mainblock div")

Matches any div element that is a descendant of #mainblock.

$("#mainblock > div")

Matches any div element that is a child of #mainblock .

check http://www.w3.org/TR/CSS2/selector.html

Answer 3

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.

Answer 4

The first one will select any div that is a child of `#mainblock' at any level. The second will select any div that is an immediate child.

See this link for more info on the CSS > selector which behaves the same as in jQuery.

Answer 5

$("#mainblock div")

This one target all DIVs inside "#mainblock" not matter it's direct child of "#mainblock", or child of child of main block or so on.

$("#mainblock > div")

This will target only direct child DIVs of "#mainblock" and ignore other DIVs. This one is faster then above in case you have only direct childs. Because it's not try to find inside other elements of childs.

Answer 6

$("#mainblock > div") = the childs only level

$("#mainblock div") = all the childs+ desendents.