In jQuery, using the "find' function, what does this expression mean: $(".divName").find('> div')

Question

I understand the "find" function, I'm just not familiar with what '> div' means. Can anyone help?

Answer 1

It means all direct "div" descendants (so without other elements in between)

So, if your HTML is:

<div id="id1">
  <div id="id2">
    <div id="id3">
    </div>
  </div>
</div>

$("#id1").find("div") will return divs "id2" and "id3"

$("#id1").find("> div") will return only div "id2"

Answer 2

If it's easier to think of, it's equivalent to using .children(), like this:

$(".divName").children("div")

Also note that if you have the option, you should use .children(selector) over .find(>selector), it's faster due to the few steps figuring out that > == children being removed from the equation (and and .find() being optimized for an all-together different purpose).

Answer 3

It is the CSS selector called "child combinator", meaning that it will select, in your instance, all div children of ".divName". It is different from the "descendant combinator" (.find("div")) that would select all div descendants of ".divName".

Source: http://www.w3.org/TR/css3-selectors/#child-combinators

Examples from that page:

The following selector represents a p element that is child of body:

body > p

The following example combines descendant combinators and child combinators.

div ol>li p

It represents a p element that is a descendant of an li element; the li element must be the child of an ol element; the ol element must be a descendant of a div. Notice that the optional white space around the ">" combinator has been left out.

On that same page you can find a list of all CSS 3 selectors: http://www.w3.org/TR/css3-selectors/#selectors