Question

我希望遍历page并通过它们切换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

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

我希望这会有所帮助。

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 3

不幸的是，我们没有直接的方法来查找下一个非兄弟元素，但我们可以使用jquery函数以多种方式处理这种情况。我刚尝试实现您的目标，请查看this working fiddle并告诉我您是否需要明确，并添加一些内联评论以供您理解。

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

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

使用不是兄弟的类来获取下一个元素

3 个答案: