Получить следующий элемент с классом, который не является родным братом

Question

Я хочу пройти через page s и переключить 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 DIVS один за другим в определенном порядке. Если это так, написать алгоритм, который проходит дерево: данный корень, переключение, если это .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'); 
}) 

Надеюсь, это поможет.

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>

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

Этот подход ручка s сценарий с одним уровнем ребенка, вы можете расширить его на несколько уровней и с помощью рекурсивных функций, я думаю, это поможет вам соответствующим образом обработать ваш сценарий.