jQuery的目標未來整個DOM

Question

同一類的。如果我有這個網站：

<section class="slide current"></section> 

<section> 
    <div class="slide"></div> 
    <div class="slide"></div> 
</section> 

<section class="slide"></section> 

如何定位基於這樣我current類是下一個和以前slide類，使用jQuery/JS？

Answer 1

由於slide元素可以嵌套在你需要的任何級別上，當你點擊其中一些元素時循環每個幻燈片元素，然後根據循環中的當前索引找到prev和next。

$('.slide').click(function() { 
 
    let all = $('.slide'); 
 
    all.removeClass('current next prev'); 
 

 
    let slides = Array.from(all); 
 
    $(this).addClass('current'); 
 

 
    slides.forEach(function(e, i) { 
 

 
    let el = $(e); 
 

 
    if (el.hasClass('current')) { 
 
     let prev, next; 
 
     if (slides[i - 1]) prev = $(slides[i - 1]); 
 
     if (slides[i + 1]) next = $(slides[i + 1]); 
 

 
     if (prev) prev.addClass('prev'); 
 
     if (next) next.addClass('next'); 
 
    } 
 
    }) 
 
})

.slide{cursor: pointer; padding: 5px;} 
 
.current {color: green;} 
 
.prev {color: blue} 
 
.next {color: red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<section class="slide current">1</section> 
 
<section> 
 
    <div class="slide">2</div> 
 
    <div class="slide">3</div> 
 
    <div> 
 
    <div> 
 
     <div class="slide">4</div> 
 
    </div> 
 
    </div> 
 
</section> 
 
<section class="slide">5</section>