Jquery Next Previous Code - Jquery

How to find previous or next content using jquery code?

Snippet Code


  
Rate this page :
  [ 0 votes]

Simple jquery code to find the next or previous element from the current element.

<script type='text/javascript'> $(document).ready(function(){ $("#next").click(function(){ if ($(".demo div:visible").next().length != 0) { $(".demo div:visible").next().show().prev().hide(); $("#prev").removeAttr("disabled"); var last = $(".demo div:visible").html(); if (last=='Fifth Div') { $("#next").attr("disabled", true); $("#prev").removeAttr("disabled"); } } else { $(".demo div:visible").hide(); $(".demo div:first").show(); } return false; }); $("#prev").click(function(){ if ($(".demo div:visible").prev().length != 0) { $(".demo div:visible").prev().show().next().hide(); $("#next").removeAttr("disabled"); var first = $(".demo div:visible").html(); if (first=='First Div') { $("#prev").attr("disabled", true); $("#next").removeAttr("disabled"); } } else { $(".demo div:visible").hide(); $(".demo div:last").show(); } return false; }); $(".demo div").each(function(e) { if (e != 0) $(this).hide(); $("#prev").attr("disabled", true); }); }); </script> <div align='center'> <div class="demo"> <div class="cls1">First Div</div> <div class="cls2">Second Div</div> <div class="cls3">Third Div</div> <div class="cls4">Fourth Div</div> <div class="cls5">Fifth Div</div> </div> <input type='button' id='prev' value='Previous'> <input type='button' id='next' value='Next'> </div>

Tags


Ask Questions

Ask Question