jQuery Traversing

Traversing is a processing of selecting specific elements based on their relationship to other elements.
Here are some classifications and its methods
  1. Parent and Ancestor Traversal - parent(), parents(), parentsUntil() and closest()
  2. Child and Descendant Traversal - children() and find()
  3. Sibling Traversal - siblings(), next(), nextAll(), nextUntil(), prev(), prevAll(), prevUntil()

Parent and Ancestor Traversal

It's the process of finding the parent ancestors of an element.
we have four ansestor traversl methods
  1. parent() - Get the direct parent of each element.
  2. parents() - Get all ancestors of each element.
  3. parentsUntil() - Get all ancestors up to, but not including, a certain element.
  4. closest() - Get the first element that matches the selector, traversing up through ancestors.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jQuery Traversal Example</title>
  <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
  <style>
    div {
      padding: 10px;
      margin: 5px;
      border: 1px solid #ccc;
    }
  </style>
</head>
<body>

<div id="targetElement">
  <p>This is the target element.</p>
  <div>
    <span>Child element</span>
  </div>
</div>

<script>
  // Using parent() to select the direct parent and apply styling
  $("#targetElement").parent().css("background-color", "lightblue");

  // Using parents() to select all ancestors and apply styling
  $("#targetElement").parents().css("border", "2px dashed red");

  // Using parentsUntil() to select ancestors until a certain element and apply styling
  $("#targetElement span").parentsUntil("body").css("font-weight", "bold");

  // Using closest() to select the closest ancestor matching a selector and apply styling
  $("#targetElement span").closest("div").css("color", "green");
</script>

</body>
</html>

Child and Descendant Traversal

It's the process of finding the descendants of an element.
we have only two descendant traversl methods
  1. children() - Get the children of each element.
  2. find() - Get the descendants of each element, optionally filtered by a selector.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jQuery Child and Descendant Traversal Example</title>
  <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
  <style>
    div {
      padding: 10px;
      margin: 5px;
      border: 1px solid #ccc;
    }
  </style>
</head>
<body>

<div id="parentElement">
  <p>This is the parent element.</p>
  <div>
    <span>Child element 1</span>
    <span>Child element 2</span>
  </div>
</div>

<script>
  // Using children() to select direct children and apply styling
  $("#parentElement").children().css("background-color", "lightblue");

  // Using find() to select descendants and apply styling
  $("#parentElement").find("span").css("font-weight", "bold");
</script>

</body>
</html>

Sibling Traversal

It's the process of finding the descendants of an element.
we have only seven sibling traversl methods
  1. siblings() - Returns all the siblings of each element.
  2. next() - Returns the immediately following sibling of each element.
  3. nextAll() - Returns all the following siblings of each element.
  4. nextUntil() - Returns all the following siblings up to, but not including, a certain element.
  5. prev() - Returns the immediately preceding sibling of each element.
  6. prevAll() - Returns all the preceding siblings of each element.
  7. prevUntil() - Returns all the preceding siblings up to, but not including, a certain element.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jQuery Sibling Traversal Example</title>
  <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
  <style>
    div {
      padding: 10px;
      margin: 5px;
      border: 1px solid #ccc;
    }
    .highlight {
      background-color: lightyellow;
    }
  </style>
</head>
<body>

<div id="middleElement">
  <p>First paragraph.</p>
</div>

<script>
  // Using siblings() to select all siblings and apply styling
  $("#middleElement").siblings().addClass("highlight");

  // Using next() to select the immediately following sibling and apply styling
  $("#middleElement p").next().css("color", "blue");

  // Using nextAll() to select all following siblings and apply styling
  $("#middleElement p").nextAll().css("font-style", "italic");

  // Using nextUntil() to select siblings until a certain element and apply styling
  $("#middleElement p").nextUntil("div").css("text-decoration", "underline");

  // Using prev() to select the immediately preceding sibling and apply styling
  $("#middleElement p").prev().css("color", "green");

  // Using prevAll() to select all preceding siblings and apply styling
  $("#middleElement p").prevAll().css("border", "2px dashed red");

  // Using prevUntil() to select siblings until a certain element and apply styling
  $("#middleElement p").prevUntil("body").css("margin", "15px");
</script>

</body>
</html>

Quick Recap - Topics Covered

jQuery Transversing
Parent and Ancestor Traversal
Child and Descendant Traversal
Sibling Transversing

Practice With Examples in Compilers

The Concepts and codes you leart practice in Compilers till you are confident of doing on your own. A Various methods of examples, concepts, codes availble in our websites. Don't know where to start Down some code examples are given for this page topic use the code and compiler.

Example js

Example 1 Example 2 Example 3 Example 4 Example 5


Quiz


FEEDBACK

Rating


Message