Jquery find in tree

Question

I have the following context:

<div class='pai' id='item'>

    <div class='form'>

       <div class='filho' id='item1'>

            <div class='filho' id='item3'>

            </div>

       </div>

       <div class='filho' id='item2'>

       </div>

    </div>

</div>

I’d like to get the elements .filho of first level in relation to the element .pai. Soon I would have only 2 results (item1 and item2) disregarding item3.

I must do this without regard to id, because I used him on this example just to make the question clearer. If possible, also disregard the form.

Answer 1

We may consider the form?

If yes the dial would be like this

$('.pai > .form > .filho')

The selector > considers only the father’s direct children disregarding the hierarchy.

Functional example in http://jsfiddle.net/776jy0hs/

More about this in https://api.jquery.com/child-selector/

Edited

To totally disregard any kind of hierarchy and take the first children, you can do so:

$('.pai .filho:first-of-type');

This will select all the father’s children, but only the first of their kind

Jsfinddler updated http://jsfiddle.net/776jy0hs/1/

More about in https://api.jquery.com/first-of-type-selector/

Answer 2

The combination element Child (P > F) selects only first-level children.

As you have a div class form in the first level, you could pick up the children as follows:

$("div.pai > div > .filho")

Thus, an array containing the children of id "item1" and "item2" is returned, ignoring the "item3", which in this case is the child of item1.

Answer 3

It can be like that too.

$('div.pai').find('.filho').siblings('.filho');

Search in the tree the .filho(s) and takes only the first-degree.

Answer 4

you can do it this way:

$(".pai").children().children(".filho");