Traversing the DOM tree with jQuery

Posted About 13 years ago. Visible to the public. Linked content.

jQuery offers many different methods Show archive.org snapshot to move a selection through the DOM tree. These are the most important:

$element.find(selector) Show archive.org snapshot
Get the descendants of each element in the current set of matched elements, filtered by a selector. Does not find the current element, even it matches. If you wanted to do that, you need to write $element.find(selector).addBack(selector).

$element.closest(selector) Show archive.org snapshot
Get the first ancestor element that matches the selector. This also finds the current element, if it matches the selector.

$element.children(selector) Show archive.org snapshot
Get the immediate children of each element in the set of matched elements, optionally filtered by a selector.

$element.parents(selector) Show archive.org snapshot
Get the ancestors of each element in the current set of matched elements, optionally filtered by a selector. Despite the name, this looks at all ancestors, not just the immediate parents.

$element.parent(selector) Show archive.org snapshot
Get the immediate parent of each element in the current set of matched elements, optionally filtered by a selector.

$element.filter(selector_or_function) Show archive.org snapshot
Reduce the set of matched elements to those that match the selector or pass the function's test.

jQuery has a select method, but it has nothing to do with navigating the DOM tree. You are probably thinking about Prototype's select method Show archive.org snapshot .

If you would like to transport your jQuery knowledge to the native DOM API, see DOM API for jQuery users.

api.jquery.com
Henning Koch
makandra.com
Say thanks2
Last edit
About 4 years ago
Niklas Hasselmeyer
Keywords
navigate
License
Source code in this card is licensed under the MIT License.

Related cards:

jQuery: How to replace DOM nodes with their contents

You know that you can use jQuery's text() to get an element's contents without any tags.
If you want to remove only some tags, but keep others, use contents() and unwrap(). Here is how.

Consider the following example element.

$containe...

JavaScript without jQuery (presentation from 2019-01-21)

Summary

  • We want to move away from jQuery in future projects
  • Motivations are performance, bundle size and general trends for the web platform.
  • The native DOM API is much nicer than it used to be, and we can polyfill the missing pieces
  • Un...

jQuery promises: done() and then() are not the same

jQuery's deferred objects behave somewhat like standard promises, but not really.

One of many subtle differences is that there are two ways to chain callbacks to an async fu...

The Ruby Object Model

In Ruby (almost) everything is an Object. While this enables a lot of powerful features, this concept might be confusing for developers who have been programming in more static languages, such as Java or C#. This card should help understanding t...

The JavaScript Object Model: A deep dive into prototypes and properties

Speaker today is Henning Koch, Head of Development at makandra.

This talk will be in German with English slides.

Introduction

As web developers we work with JavaScript every day, even when our backend code uses anothe...

CSS: Matching against attributes and their values (or parts of them)

You probably know that you can use CSS selectors to match against elements and their attributes, such as:

a[title] { /* any <a> that has a "title" */ }
a[data-fancy="true"] { /* any <a> that has their "data-fancy" attribute set to "true" *...

Get the last leaf of a DOM tree (while considering text nodes)

I use this to simulate the (non-existing) :last-letter CSS pseudoclass, e. g. to insert a tombstone at the end of an article:

findLastLeaf = ($container) ->
  $children = $container.chi...

Find the innermost DOM element that contains a given string

Let's say you want to find the element with the text hello in the following DOM tree:

<html>
  <body>
    <article>
      <strong>hello</strong>
      <strong>world</strong>
    </article>
  </body>
</html>

You might think of using jQu...

Use jQuery's selector engine on vanilla DOM nodes

There are cases when you need to select DOM elements without jQuery, such as:

  • when jQuery is not available
  • when your code is is extremely performance-sensitive
  • when you want to operate on an entire HTML document (which is hard to represent ...

DOM API for jQuery users

General hints on the DOM

  • the root of the DOM is document
  • custom elements inherit from HTMLElement. They need a - (dash) in their name, e.g. <notification-box>.
  • event listeners don't have event delegation à la `.on('click', cssSel...
Posted by Henning Koch to makandra dev (2011-03-11 09:49)
This website uses short-lived cookies to improve usability.
or learn more