CODEWITHSUNDEEP
jqueryjquery-selectors
James
James

Reputation: 43

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

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

Upvotes: 4

Views: 370

Answers (3)

Dom De Felice
Dom De Felice

Reputation: 476

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

Upvotes: 1

Nick Craver
Nick Craver

Reputation: 630559

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).

Upvotes: 3

Philippe Leybaert
Philippe Leybaert

Reputation: 171864

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"

Upvotes: 7

Related Questions