JQuery.Next () с не селектором не работает должным образом - PullRequest
Новая
       0

JQuery.Next () с не селектором не работает должным образом

9 голосов
/ 02 декабря 2011

Я пытаюсь настроить вращающуюся панель, однако у меня есть три состояния: активное, неактивное, отключено.

Я хочу вращаться только между активными и неактивными панелями и пропускать отключенные панели.Если больше нет неактивных панелей, вернитесь к первой панели.

Однако с помощью приведенного ниже кода вы нажимаете кнопку, чтобы выбрать панель 1, затем панель 2 и вернуться к панели 1, не выбирая панель 5. Если я уберу неселектор из выделенной жирным шрифтом части, он будет работать, как и ожидалось.Я думаю, что это мое понимание (или его отсутствие) следующего оператора.Какие-нибудь мысли?

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="http://code.jquery.com/jquery-1.7.min.js" type="text/javascript"></script>  
<script type="text/javascript">
    $(function () {
        $("#rotate").click(function () {
            var ActivePanel = $('.active');                 //Get the current active panel 
            var NextPanel = $('.active').next('.inactive:not(.disabled)'); //Get the next panel to be active. 
            if (NextPanel.length == 0) NextPanel = $("#panel1"); //check for null next. if so, rotate back to the first panel

            console.log("Active Panel: ", ActivePanel);
            console.log("Next Panel: ", NextPanel);

            $(ActivePanel).removeClass("active").addClass("inactive");
            $(NextPanel).removeClass("inactive").addClass("active"); 
        });
    });    
    </script>
</head>
<body>
    <button id="rotate">Rotate Active Panel</button>
    <div id="panel1" class="active"><p>Some Content</p></div>
<div id="panel2" class="inactive"></div>
<div id="panel3" class="inactive disabled"></div>
<div id="panel4" class="inactive disabled"></div>
<div id="panel5" class="inactive"></div>
</body>
</html>

Ответы [ 3 ]

7 голосов
/ 02 декабря 2011

Метод next возвращает ближайшего брата, только если он соответствует селектору.Используйте метод nextAll.

Попробуйте следующее: 

$("#rotate").click(function() {
  var activePanel = $('.active'); //Get the current active panel 
  var nextPanel = activePanel.nextAll('.inactive').not('.disabled').first(); //Get the next panel to be active. 
  if (!nextPanel.length) {
    nextPanel = $("#panel1"); //check for null next. if so, rotate back to the first panel
  }

  console.log("Active Panel: ", activePanel);
  console.log("Next Panel: ", nextPanel);

  $(activePanel).removeClass("active").addClass("inactive");
  $(nextPanel).removeClass("inactive").addClass("active");
});

Смотрите здесь jsFiddle.

2 голосов
/ 02 декабря 2011

попробуйте использовать следующий селектор ~, за которым следует вложенный селектор .class, :not(.class) и :first 

$("#rotate").click(function() {
    var ActivePanel = $('.active');
    var NextPanel = $(".active ~ .inactive:not(.disabled):first");
    if (NextPanel.length == 0) NextPanel = $("#panel1");    
    $(ActivePanel).removeClass("active").addClass("inactive");
    $(NextPanel).removeClass("inactive").addClass("active");
});

Пример работы: http://jsfiddle.net/hunter/vfVBB/

Следующий селектор братьев и сестер («prev ~ siblings»)

Описание : Выбирает все элементы одного уровня, которые следуют после элемента «prev», имеют одного и того же родителя и соответствуют фильтрующему селектору «siblings».

1 голос
/ 01 февраля 2012

Еще один способ сделать это 

.nextAll(".inactive:not(.disabled):first")
...