JQuery find tree

Navigation
6

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 relative to the .pai element. So I would only have 2 results ( item1 and item2 ) disregarding item3 .

  

I should do this without taking into account id , since I used it in that   example to make the question clearer. If possible, also disregard form .

    
asked by anonymous 21.09.2015 / 15:09

4 answers

4

Can we consider the form?

If yes the selector would be like this 

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

The > selector considers only the direct children of the parent disregarding the hierarchy.

Functional example at link

More about this at link

Edited

To completely disregard any kind of hierarchy and catch the first children, you can do this: 

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

This will select all the children of the parent, but only the first of their kind

Updated JSFinddler link

More on link

    
21.09.2015 / 15:28
3

The child combining element (P & Ft) selects only first-level children.

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

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

In this way, an array containing the children of id "item1" and "item2" is returned, being ignored the "item3", which in case is child of item1.     

21.09.2015 / 15:27
2

It can be that way too.

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

Search the tree for .filho(s) and get only the first degree.

    
21.09.2015 / 15:30
0

You can do this as follows: 

$(".pai").children().children(".filho");
    
21.09.2015 / 15:34
Placing images in a div with jquery How to use multiple models in a view