jQuery TutorialsLearn next/nextAll and prev/prevAll Methods in jQuery

Learn next/nextAll and prev/prevAll Methods in jQuery

Jquery-next-nextAll-and-prev-prevAll-740X296

The jQuery next/nextAll and prev/prevAll methods are a part of jQuery traversing, which means “move through”. They are used to select HTML elements based on their relation to other elements.
With jQuery traversing, you can conveniently select elements above the current one in the three, downstream to the current one, and on the same level as the current one in the DOM tree. This movement is called traversing – or moving through – the DOM.

Let’s start with an example. Create an unordered list of 5 items, and give it a class name of ‘shopping’. Like so:

<ul class='shopping'>
<li>bananas</li>
<il>grapes</li>
<li>apples</li>
<li>potatoes</li>
<li>cucumbers</li>
</ul>

Start selecting:

(document).ready(function(){
$('.shopping li:first').append(' yellow');
});

Here we’ve selected the class ‘shopping’, then we narrowed our selection to the li elements inside this class, and then we narrowed it down further to the first li element.

Now select the last item in the same method:

(document).ready(function(){
$('.shopping li:last').append(' green');
});

Now, let’s look at an alternative way to select the first li element inside the unordered list:

(document).ready(function(){
$('.shopping').find('li').first().append(' first');
});

Here, we are now using the find() method to perform the exact same functionality as before – finding the li elements inside the class ‘shopping’, then selecting only the first li using .first().

Let’s do the same thing with the last list item:

(document).ready(function(){
$('.shopping').find('li').last().append(' last');
});

Now use the next() method:

(document).ready(function(){
$('.shopping').find('li').first().next().append(' red');
});

We are starting the same as before, selecting the first li in the shopping class, but with the addition of next(). We have now selected the next element after the first element which is the second element in the list.

Let’s build a more practical example of where we’d want to use the next() method – a menu list.

<ul class='dropdown'>
<li>resources</li>
<il>articles</li>
<li>videos</li>
<li>blog</li>
</ul>

Let’s distinguish the first menu items by giving it a bigger font size. Like so:

(document).ready(function(){
$('.dropdown').find('li').first().addClass('main');
});

In our CSS section, we add:

.main{
font-size: 30px;
}

Now we style the menu:

.dropdown{
list-style:none;
padding: 5px;
}

Learn Javascript And JQuery From Scratch

let’s hide the drop down items:

(document).ready(function(){
$('.dropdown').find('li').first().addClass('main').nextAll().hide();
});

Explanation: We have selected the class ‘dropdown’, then the li elements in that class, then the first li element, then we have added the ‘main’ class to the first li, and eventually we selected all the li elements inside the ‘dropdown’ class that come after the first li and hid them with hide().

Let’s get fancy and add a hover event handler that would perform an action when we hover over the first menu item.

(document).ready(function(){
$('.dropdown).find('li').first().addClass('main').hover(function(){
     $(this).nextAll().toggle();
     }).nextAll().hide();
});

Explanation: We are doing the same as before – selecting the class ‘dropdown’, then the li elements in that class, then the first li element, then adding the ‘main’ class to it. But in addition, are also appending on an event handler for the hover event which would toggle everything after this – which in this case is the first menu item.

So hereby, we have effectively created a functional menu with essentially only 3 lines of code. We have demonstrated how to use next/nextAll or prev/prevAll (The prevAll method works exactly the same as the nextAll method, selecting all the elements prior to the current selected element instead of all the elements following the current selected element). Additional methods we’ve used are toggle() and find() which selects the element we want to apply CSS styling or a certain functionality to.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Exclusive content

- Advertisement -

Latest article

21,501FansLike
4,106FollowersFollow
106,000SubscribersSubscribe

More article

- Advertisement -