javascript - Selecting next div jquery -

i trying select .next() div work within carousel.

however, seems returning .children() rather .next()

html

<nav class="slider-navigation">   <div class="left-arrow"></div>   <div class="right-arrow"></div> </nav>  <div class="slides">   <div class="slide" id="slide1"></div>   <div class="slide" id="slide2"></div>   <div class="slide" id="slide3"></div>   <div class="slide" id="slide4"></div> </div> 

jquery

$(".left-arrow").click(function () {    var currentslide = $(this).parent().siblings(".slides").children().next();    // currentslide.  }); 

when console.log(currentslide) in browser returns 4 children of .slides.

the same happens for $(".right-arrow").click() i did not want add duplicate code

any help?

thanks

another option set first element "current" class , use start navigation between slides.

*on prev control click, if there no element before 1 nothing happen , vice versa, that's ok if want change direction after last/first element got "current" class tell me , update code...

here is:

html:

<nav class="slider-navigation">   <div class="left-arrow">left</div>   <div class="right-arrow">right</div> </nav>  <div class="slides">   <div class="slide current" id="slide1"></div>   <div class="slide" id="slide2"></div>   <div class="slide" id="slide3"></div>   <div class="slide" id="slide4"></div> </div> 

jquery:

$(document).ready(function(){     $(".left-arrow").click(function(){         $('.current').prev().addclass('current');         $('.current:first').next().removeclass('current');     });     $(".right-arrow").click(function(){         $('.current').next().addclass('current');         $('.current:last').prev().removeclass('current');     }); }); 

live example: http://jsfiddle.net/spvlpjct (i've put css understand it).