Перейдите между .content divs

Question

Я хочу перемещаться между .content divs.

Я пытаюсь сделать это с помощью приведенного ниже кода, но он не работает должным образом.

Когда я нажимаю ссылку .next в последнем div, все содержимое исчезает, а не появляется снова для первого .content div.

И когда я нажимаю в ссылке prev, содержимое исчезает.

пример: http://jsfiddle.net/tebzsuwt/3/

JQuery:

$(".container div").each(function(e) { 
    if (e != 0) 
     $(this).hide(); 
}); 

$(".btn-next").click(function(){ 
    if ($(".container div:visible").next().length != 0) 
     $(".container div:visible").fadeOut(function(){ 
      $(this).next().fadeIn(); 
     }); 
    else { 
     $(".divs div:visible").fadeOut(function(){ 
      $(".divs div:first").fadeIn(); 
     }); 
    } 
    return false; 
}); 

$(".btn-prev").click(function(){ 
    if ($(".container div:visible").prev().length != 0) 
     $(".container div:visible").fadeOut(function(){ 
      $(this).prev().fadeIn(); 
     }); 
    else { 
     $(".container div:visible").fadeOut(function(){ 
      $(".container div:last").fadeIn(); 
     }); 
    } 
    return false; 
}); 

Answer 1

Я сделал некоторые незначительные изменения в коде, здесь рабочий пример

HTML:

<div class="container"> 
    <h2>Title</h2> 
    <a href="#" class="btn-prev">Prev</a> 
    <a href="#" class="btn-next">Next</a> 
    <div> 
     <div class="content"> 
      <p>test 1</p> 
      <p>test 2</p> 
      <div class="links"> 
       <a href="#">Link 1</a> 
       <a href="#">Link 2</a> 
      </div> 
     </div> 

     <div class="content"> 
      <p>test 2</p> 
      <p>test 3</p> 
      <div class="links"> 
       <a href="#">Link 2</a> 
       <a href="#">Link 3</a> 
      </div> 
     </div> 

     <div class="content"> 
      <p>test 4</p> 
      <p>test 5</p> 
      <div class="links"> 
       <a href="#">Link 4</a> 
       <a href="#">Link 5</a> 
      </div> 
     </div> 
    </div> 
</div> 

И JS :

$(".container .content").each(function(e) { 
    if (e != 0) 
     $(this).hide(); 
}); 

$(".btn-next").click(function(){ 
    if ($(".container .content:visible").next().length != 0) 
     $(".container .content:visible").fadeOut(function(){ 
      $(this).next().fadeIn(); 
     }); 
    else { 
     $(".container .content:visible").fadeOut(function(){ 
      $(".container .content:first").fadeIn(); 
     }); 
    } 
    return false; 
}); 

$(".btn-prev").click(function(){ 
    if ($(".container .content:visible").prev().length != 0) { 
     $(".container .content:visible").fadeOut(function(){ 
      $(this).prev().fadeIn(); 
     });} 
    else { 
     $(".container .content:visible").fadeOut(function(){ 
      $(".container .content:last").fadeIn(); 
     }); 
    } 
    return false; 
});