jQueryのターゲット全体のDOM

Question

で同じクラスの次の私は、このHTMLがある場合：私は私のcurrentクラスがどこにあるかに基づいて、次と前のslideクラスをターゲットとするにはどうすればよい

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

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

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

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