What is the difference between $("#id div") and $("#id > div")?

Question

I'm confused with these two.

I have a table structure like following;

<div id="previewSection">
  <table>
    <tbody>
      <tr>
        <td>
          <div>X
          </div>
        </td>
        <td>
          <div>Y
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

I'm prepend something in the table with Jquery. Now when I'm doing $("#previewSection div") it gives me something like m.fn.init[253] but when I call $("#previewSection > div") actually gives me the html like this [<div>…</div>] which I originally wanted.

I've checked JQuery selectors and it said if I use > it gives direct child of the selector and if I don't use it all div of the selector; but both should give me the html why I'm getting objects?? Thank you in advance.

https://developer.mozilla.org/en-US/docs/Web/CSS/Child_selectors — Kevin B, Feb 12 '16 at 20:01
The question is 'Where is my child?' against 'Where are all my descendants? — axel.michel, Feb 12 '16 at 20:04
To answer your final question... jQuery always gives you an object. More: http://stackoverflow.com/questions/1677880/how-to-get-a-dom-element-from-a-jquery-selector — isherwood, Feb 12 '16 at 20:10

John Hascall · Answer 1 · 2016-02-12T20:05:26.557

3

The difference between X Y and X > Y is that the latter will only select children (immediate descendants) of X.

Given this little snippet:

<div>
  <a>
    <span></span>
  </a>
</div>

div a       - works
div span    - works
div > a     - works
div > span  - nope, no span is an immediate descendant (child) of a div

edited Feb 12 '16 at 20:05

answered Feb 12 '16 at 20:02

John Hascall

9,176
6
48
72

What is the difference between $("#id div") and $("#id > div")?

1 Answers1