jquery DOM Traversal

by Rob Lardy

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());