Jquery .next() and .prev() functions example

in simple Example for next or previous Jquery API comes with two important traversing function next() and prev(), which data returns the find immediately bellow and preceding sibling HTML element of the selected element.

using jquery next() –

next() function returns the next sibling element of the selected element.Suggest Following Jquery next() method syntax.

.next( [selector ] )

If a selector is provided, it find and retrieves the next sibling only if it matches that selector. here know simple example like as a $( "li" ).next( ".blue" ). It deal with only with a class “blue” li element. Suggest Following jquery example

<ul>
 <li>Blue<li>
 <li>Green</li>
 <li class="blue">Blue</li>
</ul>

<script>
$( "li" ).next( ".blue" ).css( "background", "pink" );
</script>

using jquery pre() –

prev() function returns the previous sibling HTML element of the selected HTML element. Suggest Following Jquery prev() method syntax.

Read Also:  jQuery ToggleClass to Switch Between Classes

.prev( [selector ] )

If a selector is provided, it find with retrieves the previous sibling only if it matches that selector. e.g. $( "li" ).prev( ".blue" ). It deal with only with a class “blue” li HTML element. Suggest Following example

<ul>
 <li>Blue</li>
 <li class="blue">Blue<li>
 <li>Green</li>
 
</ul>

<script>
$( "li" ).prev( ".blue" ).css( "background", "pink" );
</script>

Complete example to select next and prev HTML element using Jquery

<!DOCTYPE html>
<html>
 <head>
 <title>Jquery pagination with next and previous buttons</title> 
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script>
   $(document).ready(function() { 
    var singleFelements = $("ul li").eq(0);
    var width = singleFelements.width();
    
    $("#next").click(function(){ 
     if(singleFelements.is(':last-child')){  
      $(this).prop('disabled', true);
      $("#prev").prop('disabled', false);
     }
 
     width+=50;
     singleFelements.css({"background-color" : '#c60000',
      width : width + 'px'
     });
     singleFelements = singleFelements.next();   
    });
 
    var lastEle = $("ul li").eq(-1);
    width =  lastEle.width(); 
 
    $("#prev").click(function(){ 
     if(lastEle.is(':first-child')){  
      $(this).prop('disabled', true);   
     }
  
     width-=50;   
     lastEle.css({"background-color" : '#c60000',
      width : width +'px'
     });   
  
     lastEle = lastEle.prev();   
    });
 
   });
 </script>   
 
 <style>
  ul{
   font-family: monospace;
   font-size: 15px;
   font-family: monospace; 
   font-style: normal;
   font-size-adjust: none;
   width:auto;   
  }
   
  ul li{
   background-color:#ff9900;
   width:100px;
   margin:5px;
   padding:5px;
   list-style-type:none;
  }
 </style>
</head>
<body>
 <h1>Jquery next() prev() functions</h1>
 <div>
  <ul>
   <li>heap sort</li>
   <li>top view of binary tree</li>
   <li>left view of binary tree</li>
   <li>longest palindromic subsequence</li>
   <li>bottom view of binary tree</li>  
   <li>remove loop in linked list</li>  
   <li>bankers algorithm in os</li>  
   <li>fast input output in c++</li>  
   <li>count the triplets</li>  
   <li>threaded binary tree</li>  
  </ul>
 </div>
 </div>
  <button id="next" class="btn">Next</button>  
  <button id="prev" class="btn" disabled>Prev</button>    
 </div>
 </body>
</html>

jQuery code to show the working of prevAll():

<html> 

<head> 
	<style> 
		.pakaInfo * { 
			display: block; 
			border: 2px solid lightgrey; 
			color: red; 
			padding: 5px; 
			margin: 15px; 
		} 
	</style> 
	<script src="https://ajax.googleapis.com/ajax/libs/ 
				jquery/3.3.1/jquery.min.js"></script> 
	<script> 
		$(document).ready(function() { 
			$("h3").prevAll().css({ 
				"color": "red", 
				"border": "2px solid green" 
			}); 
		}); 
	</script> 
</head> 

<body class="pakaInfo"> 
	<div> 
		unicode to krutidev ! 
		<p>This is first paragraph </p> 
		<span>concatenate Php variable with String inside img src </span> 
		<h2>seo khazana 2 !</h2> 
		<h3>4cgandhi 3 !</h3> 
		<p>cURL Error: Operation timed out after 30001 milliseconds with 0 bytes received !</p> 
	</div> 
</body> 

</html> 

In this best jQuery Articles, on click of Next and Prev buttons, We have set the background color of the li HTML element to #c60000 color as well as increase and decrease the width of li with 50px respectively.

Read Also:  jQuery AJAX Pagination in PHP Without Page Refresh Example

Related FAQ

Here are some more FAQ related to this Article:

  1. Read Also:  failed to load resource: the server responded with a status of 404 (not found)
  2. Read Also:  vue-scrollto smooth scroll vuejs example
  3. Read Also:  Remove particular value from jquery Array
  4. Read Also:  Remove undefined value from jquery array
  5. Read Also:  How to filter a html table using simple javascript?
  6. Read Also:  Laravel 6 get last Insert id from query builder
  7. Read Also:  Simple Model Popup Box using HTML CSS and JavaScript
  8. Read Also:  PHP Laravel REST APIs Tutorial with MySQL
  9. Read Also:  Laravel Resize Image Before Upload Example
  10. Read Also:  vue localStorage using Vuex Example
CLOSEX