JQuery DOM Navigation

The function children() returns the immediate children of all selected elements.

Suppose you have the following HTML structure:

<div id="parent">
  <p>Child 1</p>
  <p>Child 2</p>
  <span>Child 3</span>
</div>

You can use children() to select and manipulate the immediate child elements of the #parent div.

<script>
  // Select the immediate children of #parent div
  const children = $("#parent").children();

  // Loop through and log the text content of each child
  children.each(function () {
    console.log($(this).text());
  });
</script>

The find() function returns children and all other descendants of selected elements that match a given selector.

Suppose you want to select all p elements within a div with the class .container.

<script>
  // Select all <p> elements within .container
  const paragraphs = $(".container").find("p");

  // Loop through and log the text content of each <p> element
  paragraphs.each(function () {
    console.log($(this).text());
  });
</script>

The parent() function returns the direct parent of all selected elements.

Suppose you have the following HTML structure and you want to select the direct parent of the span element.

<div>
  <p>Parent 1</p>
  <span>Child</span>
</div>

<script>
  // Select the direct parent of the <span> element
  const parentDiv = $("span").parent();

  // Log the text content of the parent element
  console.log(parentDiv.text());
</script>

The parents() function returns all ancestors of all selected elements.

Suppose you want to select all ancestors of an element with the class .child.

<script>
  // Select all ancestors of elements with class .child
  const ancestors = $(".child").parents();

  // Loop through and log the text content of each ancestor
  ancestors.each(function () {
    console.log($(this).text());
  });
</script>

The siblings() function returns all elements within the same parent as the selected elements.

Suppose you have the following HTML structure and you want to select all siblings of the p element.

<div>
  <p>Paragraph 1</p>
  <span>Span 1</span>
  <p>Paragraph 2</p>
</div>

<script>
  // Select all siblings of the <p> element
  const siblings = $("p").siblings();

  // Loop through and log the text content of each sibling
  siblings.each(function () {
    console.log($(this).text());
  });
</script>

The next() function returns the element of the same parent that is located immediately after the selected element.

Suppose you have the following HTML structure and you want to select the element that comes right after the span element.

<div>
  <span>First</span>
  <p>Second</p>
  <div>Third</div>
</div>

<script>
  // Select the element immediately after the <span> element
  const nextElement = $("span").next();

  // Log the text content of the next element
  console.log(nextElement.text());
</script>

The function prev() is identical to next(), but it looks at the previous element instead of the next one.

Suppose you want to select the element that comes right before the p element.

<script>
  // Select the element immediately before the <p> element
  const prevElement = $("p").prev();

  // Log the text content of the previous element
  console.log(prevElement.text());
</script>

Both nextAll() and prevAll() return elements within the same parent that are located after or before the selected element, respectively.

Suppose you have the following HTML structure and you want to select all elements located after the span element.

<div>
  <span>First</span>
  <p>Second</p>
  <div>Third</div>
</div>
<script>
  // Select all elements located after the <span> element
    const nextElements = $("span").nextAll();

  // Loop through and log the text content of each next element
  nextElements.each(function () {
    console.log($(this).text());
  });
</script>

Suppose you want to select all elements located before the div element.

<script>
  // Select all elements located before the <div> element
  const prevElements = $("div").prevAll();

  // Loop through and log the text content of each previous element
  prevElements.each(function () {
    console.log($(this).text());
  });
</script>

These examples demonstrate how to use the listed DOM traversal methods to select and manipulate elements within the HTML DOM based on their relationships with other elements.