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.

.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.


Related FAQ

Here are some more FAQ related to this Article:

  1.   vue-scrollto smooth scroll vuejs example
  2.   PHP AJAX Live Search Box Autocomplete Using MySQL Database
  3.   General full forms used in daily life
  4.   jquery uncheck all checkboxes Multiple Checkbox Example
  5.   Laravel WhereHas then orWhereHas Example
  6.   Remove particular value from jquery Array
  7.   How to Select VueJs Check All Uncheck All Checkboxes
  8.   jQuery Multidimensional Array name selector
  9.   PHP Image Rotate Resize and Save Examples
  10.   How to get the class name using Jquery Example with demo?
Tags:, , ,