jquery DOM Traversal

by anandhinava

HTML

<div class="grandparent">
    <div class="parent">
        <div class="child">
            <span class="subchild"></span>
        </div>
    </div>
    <div class="surrogateParent1"></div>
    <div class="surrogateParent2"></div>
</div>

JavaScript

// Parents
 
// returns [ div.child ]
console.log($( "span.subchild" ).parent());
 
// returns [ div.parent ]
console.log($( "span.subchild" ).parents( "div.parent" ));
 
// returns [ div.child, div.parent, div.grandparent ]
console.log($( "span.subchild" ).parents());
 
// returns [ div.child, div.parent ]
console.log($( "span.subchild" ).parentsUntil( "div.grandparent" ));
  
// returns [ div.child ]
console.log($( "span.subchild" ).closest( "div" ));
 
// returns [ div.child ] as the selector is also included in the search:
console.log($( "div.child" ).closest( "div" ));

// Children

// returns [ div.parent, div.surrogateParent1, div.surrogateParent2 ]
console.log($( "div.grandparent" ).children( "div" ));

// returns [ div.child, div.parent, div.surrogateParent1, div.surrogateParent2 ]
console.log($( "div.grandparent" ).find( "div" ));

// Siblings
 
// returns [ div.surrogateParent1 ]
console.log($( "div.parent" ).next());
 
// returns [] as No sibling exists before div.parent
console.log($( "div.parent" ).prev());
 
// returns [ div.surrogateParent1, div.surrogateParent2 ]
console.log($( "div.parent" ).nextAll());
 
// returns [ div.surrogateParent1 ]
console.log($( "div.parent" ).nextAll().first());
 
// returns [ div.surrogateParent2 ]
console.log($( "div.parent" ).nextAll().last());
 
// returns [ div.surrogateParent1, div.parent ]
console.log($( "div.surrogateParent2" ).prevAll());
 
// returns [ div.surrogateParent1 ]
console.log($( "div.surrogateParent2" ).prevAll().first());
 
// returns [ div.parent ]
console.log($( "div.surrogateParent2" ).prevAll().last());

// returns [ div.surrogateParent1, div.surrogateParent2 ]
console.log($( "div.parent" ).siblings());
 
// returns [ div.parent, div.surrogateParent2 ]
console.log($( "div.surrogateParent1" ).siblings());