Main Tutorials

jQuery next() example

The next() function is used to get the immediate following sibling element in the set of matched elements. Only the following sibling’s element is select, it’s child element will be ignore.

This next() function is allow to filter it by ‘selector’. For example, next(‘div’) is used to get the immediate following sibling elements that are <div> elements only.

jQuery next() example


<html>
<head>
<style type="text/css">
  div,p { 
  	width:110px; 
	height:40px; 
	margin:2px 8px 64px 8px;
        float:left; 
	border:1px blue solid; 
  }
 </style>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
</head>
<body>
  <h1>jQuery next() example</h1>
	
  <div id="start">This is div 1
     <div>div 1 child</div>
  </div>
  <p>This is paragrah 1</p>
  <div>This is div 2
     <div>div 2 child</div>
  </div>
  <div>This is div 3
     <div>div 3 child</div>
  </div>

  <br/><br/><br/>
  <br/><br/><br/>
  <button id="nextButton1">next()</button>
  <button id="nextButton2">next('div')</button>
  <button id="nextButton3">next('p')</button>
  <button id="reset">Reset</button>
  
<script type="text/javascript">
	
    var $currElement = $("#start");
    $currElement.css("background", "red");
	
    $("#nextButton1").click(function () {
		
	  if(!$currElement.next().length){
	  	alert("No element found!");
		return false;	
	  }
	  
	  $currElement = $currElement.next();
	  
      $("div,p").css("background", "");
      $currElement.css("background", "red");
    });
	
    $("#nextButton2").click(function () {
		
	  if(!$currElement.next('div').length){
	  	alert("No element found!");
		return false;	
	  }
	  
	  $currElement = $currElement.next('div');
	  
      $("div,p").css("background", "");
      $currElement.css("background", "red");
    });
	
    $("#nextButton3").click(function () {

	  if(!$currElement.next('p').length){
	  	alert("No element found!");
		return false;	
	  }
	  
	  $currElement = $currElement.next('p');
	  
      $("div,p").css("background", "");
      $currElement.css("background", "red");
    });
	
	$("#reset").click(function () {
	  location.reload();
    });
	
</script>
</body>
</html>

About Author

author image
Founder of Mkyong.com, love Java and open source stuff. Follow him on Twitter. If you like my tutorials, consider make a donation to these charities.

Comments

Subscribe
Notify of
7 Comments
Most Voted
Newest Oldest
Inline Feedbacks
View all comments
amin
9 years ago

hi tansks for this wonderful site

i want to now is that way to found out

$currElement=$currElement.next(‘div’) first array like –> $currElement[0]<–
whent i write alert($currElement.next('div').length) give me one nummber like 3
but i want to accses to
$currElement[0] for give style

Anthony
11 years ago

Nice tutorial!

Is there any way to make it so that when you click the “next” button and reach the last item, it goes back to the start?

Apps91
12 years ago

I have found an error, if we click next() many times all buttons become red…

Prathap
11 years ago
Reply to  Apps91

When you get all the buttons RED, than you click on RESET button, so that red color will disappear. Thank you

alex
11 years ago
Reply to  Prathap

I dont think this is an “error” it is just going to the next div, which is that

Andy Encarnacion
13 years ago

I was having troubles to implement the jQuery next funtion because i did not know that the elements to use must be at the same level in the page.
This sample shows me how .next() does work. Thanks.

Mohan Prajapati
13 years ago

Hello friends,

JQuery gives new next functions in it’s latest version(1.4). I have mentioned the function’s short description in my post. Please see it and do the best using JQuery.
Here is the link

http://aspnet-ajax-aspnetmvc.blogspot.com/2010/10/jquery-next-fucntion-with.html

Thanks,
Mohan Prajapati