2014-12-01 2 views
0

Я пытаюсь выбрать .next() div для работы внутри карусели.Выбор следующего div jquery

Тем не менее, кажется, возвращаются все .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) в браузере он возвращает все 4 детей .slides.

То же самое происходит для$(".right-arrow").click()Я просто не хочу, чтобы добавить повторяющийся код

Любой помощь?

Благодаря

+0

нам нужно будет увидеть еще какой-нибудь код, возможно, даже скрипку, потому что непонятно, чего вы пытаетесь достичь. Как вы определяете, что такое слайд? Возможно, что-то вроде '$ ('. Slide: visible'). Next()' может работать, хотя я бы, вероятно, сохранил какой-то указатель, чтобы определить, какой слайд активен. – Pevara

+0

[$ .fn.next] (http://api.jquery.com/next/) находит следующий элемент для каждого элемента в коллекции, которую вы вызываете. Вы получаете все дочерние элементы div, а затем вызываете '.next()' на нем. Это вернет все элементы, найденные '.children()', за исключением первого. Вам нужно вызвать '.next()' для текущего элемента, а не для всей коллекции. Без определения «текущего» элемента невозможно определить «следующий». – Waxen

+0

@PeterVR Я ​​пытаюсь заставить работать карусель. В настоящее время я делаю это, потянув весь ползунок влево или вправо в соответствии со стрелкой, на которую была нажата кнопка. Я не хочу делать это таким образом, поэтому я пытаюсь найти решение, чтобы заставить его работать, добавив более высокий индекс z к следующему .slide, чем последний. –

ответ

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, чтобы помочь вам понять его).

+0

Это похоже на тип вещи, которую я пытаюсь сделать, однако я хочу, чтобы ни один .current div не находился за текущим и не исчезал при использовании более высокого индекса z, чем тот, который находится на .current.Имеет ли это смысл? –

+0

звучит примерно так: http://jsfiddle.net/spvLpjct/1/, я использовал opacity вместо z-index, но вы можете изменить его, если хотите. –

+0

Сортировка, да. Но как бы вы справлялись с случаем, когда последний слайд виден и стрелка стрелки вправо? –

0

Если текущий слайд видна, а остальные скрыты вы можете использовать:

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

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

    // Do something with currentSlide. 

}); 
+0

Я посмотрю, поможет ли вам и скоро вернется к вам. –

Смежные вопросы