获取具有非同级类的下一个元素

Question

我想遍历pages 并通过它们切换active 类。我应该如何不使用set 类？

HTML

<div class="page active"></div>
<div class="set">
    <div class="page"></div>
    <div class="page"></div>
</div>
<div class="page"></div>

jQuery

$('.active').toggleClass('active').toggle().nextAll('.page').toggleClass('active');

Answer 1

我假设“遍历”是指您想按特定顺序一个接一个地切换.page div。 如果是这种情况，请编写一个遍历树的算法：给定一个根，如果它是 .page，则切换，并递归处理其每个子节点

function traverse(root){
  if(!root) return;
  if(root.hasClass('page')) root.toggle('active');
  root.children().forEach(function(child){
    traverse(child);
  });

  //lets say you want to bind to click event on every div
  $('div').click(function(){
    traverse($(this));
  });
}

Answer 2

不幸的是，我们没有直接的方法来找到下一个非同级元素，但我们可以使用 jquery 函数以多种方式处理这种情况。我刚刚尝试实现您的目标，请查看this working fiddle，如果您需要任何说明，请告诉我，还添加了一些内联 cmets 以供您理解。

HTML：

<div class="page active">div 1</div>
<div class="page">div 2</div>
<div class="set">
    <div class="page">set 1 - div 1</div>
    <div class="page">set 1 - div 2</div>
    <div class="page">set 1 - div 3</div>
</div>
<div class="page">div 5</div>
<div class="set">
    <div class="page">set 2 - div 1</div>
    <div class="page">set 2 - div 2</div>
</div>
<div class="page">div 6</div>
<button class="next-btn">Next</button>

CSS：

.active {
  color: red;
}
.next-btn {
  cursor: pointer;
}

Javascript：

$(function() {
  $('button').click(function() {
    var elem = $(".page.active").toggleClass('active'); // current active element
    var nextElem = elem.next(); // next element

    // go above one level and get next element
    // if no next element exists, means end of the child level
    if (!nextElem.length) {
        nextElem = elem.parent().next();
    }

    // if next element has some PAGE children then update the first child element 
    if (nextElem.children('.page').length > 0 ) {
        nextElem.children('.page:first-child').toggleClass('active');
    } else if (nextElem.hasClass('page')) {
        nextElem.toggleClass('active');
    }
  });
});

这种方法处理具有一个子级别的场景，您可以使用递归函数将其扩展到多个级别，我认为这有助于您相应地处理您的场景。

Answer 3

Working fiddle

您可以使用索引来获取 DOM 中的下一个元素，使用活动的索引 +1 然后激活它，我认为以下是您正在寻找的内容：

var getActiveIndex = function(){
    var active_index;
    $('.page').each(function(i){
        if ( $(this).hasClass('active') )
            active_index = i;
    })
    return active_index;
}

$('body').on('click', '.next', function(){
    var active_page_index = getActiveIndex(); //Get active page index
    var new_index = active_page_index+1; //Set the next page index
    var next_page = $('.page:eq('+new_index+')'); //Get the next page

    $('.page').removeClass('active');

    if(next_page.length)
      next_page.addClass('active');
    else
      $('.page:first').addClass('active');
})

我希望这会有所帮助。

var getActiveIndex = function(){
  var active_index;
  $('.page').each(function(i){
    if ( $(this).hasClass('active') )
      active_index = i;
  })
  return active_index;
}

$('body').on('click', '.next', function(){
  var active_page_index=getActiveIndex();
  var new_index = active_page_index+1;
  var next_page = $('.page:eq('+new_index+')');

  $('.page').removeClass('active');

  if(next_page.length)
    next_page.addClass('active');
  else
    $('.page:first').addClass('active');
})

.active{
  background-color: red; 
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="page active">page</div>
<div class="set">
  <div class="page">- Set page</div>
  <div class="page">- Set page</div>
</div>
<div class="page">page</div>
<div class="page">page</div>
<div class="page">page</div>
<div class="set">
  <div class="page">- Set page</div>
  <div class="page">- Set page</div>
</div>
<div class="page">page</div>
<br>
<button class='next'>Active the next page</button>