Main Tutorials

jQuery prev() example

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

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

jQuery prev() example


<html>
<head>
<style type="text/css">
  div,p { 
  	width:110px; 
	height:40px; 
	margin:2px 8px 2px 8px;
        float:left; 
	border:1px blue solid; 
  }
 </style>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
</head>
<body>
  <h1>jQuery prev() example</h1>
	
  <div>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/>
  <br/><br/><br/>
  <button id="prevButton1">prev()</button>
  <button id="prevButton2">prev('div')</button>
  <button id="prevButton3">prev('p')</button>
  <button id="reset">Reset</button>
  
<script type="text/javascript">
	
    var $currElement = $("#start");
    $currElement.css("background", "red");
	
    $("#prevButton1").click(function () {
		
	  if(!$currElement.prev().length){
	  	alert("No element found!");
		return false;	
	  }
	  
	  $currElement = $currElement.prev();
	  
      $("div,p").css("background", "");
      $currElement.css("background", "red");
    });
	
    $("#prevButton2").click(function () {
		
	  if(!$currElement.prev('div').length){
	  	alert("No element found!");
		return false;	
	  }
	  
	  $currElement = $currElement.prev('div');
	  
      $("div,p").css("background", "");
      $currElement.css("background", "red");
    });
	
    $("#prevButton3").click(function () {

	  if(!$currElement.prev('p').length){
	  	alert("No element found!");
		return false;	
	  }
	  
	  $currElement = $currElement.prev('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
1 Comment
Most Voted
Newest Oldest
Inline Feedbacks
View all comments
Fan bong da
11 years ago

I can’t see element with id ‘start’ on your example