Next/Prev Traversal in jQuery Tutorial 🎯

Welcome to the Next/Prev Traversal lesson! In this tutorial, we'll learn how to navigate through elements in a collection using jQuery, focusing on the next() and prev() methods.

What is Next/Prev Traversal? 📝

Next/Prev Traversal is a method used to traverse or navigate through elements in a collection (like HTML elements) in a specific direction, either forwards (next) or backwards (prev). These methods help us to access, manipulate, and perform actions on specific elements in our HTML document.

Understanding the Document Object Model (DOM) 💡

Before diving into the next/prev traversal, let's quickly recap the Document Object Model (DOM). The DOM is a programming interface for web documents. It represents the structure of a web page, allowing us to interact with HTML elements using JavaScript (or jQuery in this case).

Getting Started with jQuery 💡

Before we can use jQuery, we need to include it in our project. To do this, add the following script to the <head> section of your HTML file:

html

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

The Next() Method 📝

The next() method is used to select the next sibling element of the current element. Here's a simple example:

html

<div id="parent">
  <p id="current">This is the current paragraph.</p>
  <p>This is the next paragraph.</p>
</div>

javascript

$(document).ready(function() {
  $("#current").next().text("Modified next paragraph.");
});

In the example above, we're using the next() method to select the next sibling paragraph and change its text.

The Prev() Method 📝

The prev() method is used to select the previous sibling element of the current element. Here's an example:

html

<div id="parent">
  <p id="current">This is the current paragraph.</p>
  <p>This is the previous paragraph.</p>
</div>

javascript

$(document).ready(function() {
  $("#current").prev().text("Modified previous paragraph.");
});

In this example, we're using the prev() method to select the previous sibling paragraph and change its text.

Advanced Examples 💡

Next All and Prev All

The nextAll() and prevAll() methods are used to select all the following or preceding sibling elements, respectively. Here's an example:

html

<div id="parent">
  <p>First paragraph.</p>
  <p id="current">Current paragraph.</p>
  <p>Third paragraph.</p>
  <p>Fourth paragraph.</p>
</div>

javascript

$(document).ready(function() {
  $("#current").nextAll().each(function() {
    $(this).text("Modified next paragraph.");
  });
});

In this example, we're using the nextAll() method to select all the following siblings of the current paragraph and changing their text.

Filtering Elements

The filter() method can be used in combination with next/prev to select specific elements based on a condition.

html

<div id="parent">
  <p class="text">First text paragraph.</p>
  <p class="text">Current text paragraph.</p>
  <h2 class="heading">A heading.</h2>
  <p class="text">Third text paragraph.</p>
</div>

javascript

$(document).ready(function() {
  $(".text").next().filter(".text").each(function() {
    $(this).text("Modified next text paragraph.");
  });
});

In this example, we're using the next() method to select the next sibling, then filtering to select only the next text paragraphs and changing their text.

Next/Prev Traversal in jQuery Tutorial 🎯

Next/Prev Traversal in jQuery Tutorial 🎯

What is Next/Prev Traversal? 📝

Understanding the Document Object Model (DOM) 💡

Getting Started with jQuery 💡

The Next() Method 📝

The Prev() Method 📝

Advanced Examples 💡

Next All and Prev All

Filtering Elements

Quiz 💡