jQuery: Traversing

by JuanMa Garrido

HTML

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

JavaScript

// Selecting an element's direct parent:
 
// returns [ div.child ]
console.log ( $( "span.subchild" ).parent() )
 
// Selecting all the parents of an element that match a given selector:
 
// returns [ div.parent ]
console.log ( $( "span.subchild" ).parents( "div.parent" ) )
 
// returns [ div.child, div.parent, div.grandparent ]
console.log ( $( "span.subchild" ).parents() )
 
// Selecting all the parents of an element up to, but *not including* the selector:
 
// returns [ div.child, div.parent ]
console.log ( $( "span.subchild" ).parentsUntil( "div.grandparent" ) )
 
// Selecting the closest parent, note that only one parent will be selected
// and that the initial element itself is included in the search:
 
// 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" ) )