How to find the first direct child element of a div

Question

This should be easy but I am not able to do it.

I have a div element with id \"LeftScrollableDiv\" and I am trying to find the first child element under it:

Answer 1

$("#LeftScrollableDiv > :first-child");

Answer 2

The following didn't work for me:

$('#LeftScrollableDiv').children().first();

If you find the same, then you can treat the object returned by the children() method like an array.

To get the first element:

$('#LeftScrollableDiv').children()[0]

To get the last element:

$('#LeftScrollableDiv').children()[$('#LeftScrollableDiv').children().length-1]

Answer 3

The :first-child checks if its subject is the first child of its parent. In thise case you are trying to select element with id #LeftScrollableDiv that is the first child of its parent. All the : selectors just filter previous selection, they don't select any new elements.

There is unfortunately no .firstChild method in jQuery so you must always select all the children first and then take out the first one.

A possible selector to do it is:

"#LeftScrollableDiv > :first"

Which is far more efficient than > :first-child.

Answer 4

$('#LeftScrollableDiv').children().first();

API