Get first child in AngularJS directive

Question

I want to get and modify the first child of the given element in an Angular directive.

<div class="wanted">
</div>
<div class="not-wanted">
</div>
<div class="not-wanted">
</div>

I already tried

elm.children('.wanted')

but then my directive modifies all children. How can I do this correctly?

Answer 1

You can either use:

elm.children().first();

or:

elm.children(':first')

Both will have the same effect. The second one is slightly more performant.

Answer 2

I use: element.children().eq(0)

children() - Get the children of each element in the set of matched elements

eq() - Reduce the set of matched elements to the one at the specified index