選擇下一個div jQuery

Question

我試圖選擇.next() div在輪播中工作。

但是，它似乎將返回所有.children()而不是.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();

  // Do something with currentSlide.

});

當我在瀏覽器中使用console.log(currentSlide)時，它返回.slides所有4 .slides 。

$(".right-arrow").click() 同樣發生， 我只是不想添加重復的代碼

有什么幫助嗎？

謝謝

Answer 1

另一個選擇是將第一個元素設置為“當前”類，並使用它來開始幻燈片之間的導航。

*在上一個控件上單擊，如果在此之前沒有元素，那么什么也不會發生，反之亦然，所以沒關系，但是如果您希望在最后一個/第一個元素獲得“當前”類之后改變方向，請告訴我和我將更新代碼...

這里是：

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');
    });
});

實時示例： http : //jsfiddle.net/spvLpjct （我放了一些CSS來幫助您理解它）。

Answer 2

如果當前幻燈片可見，其余的隱藏，則可以使用：

$(".left-arrow").click(function () {

  var currentSlide = $(".slides > .slide:visible").next();

  // Do something with currentSlide.

});