jQueryのチェーンターゲットに関する問題

Question

this demoをご覧になり、選択したアンカーリンクの次と前のIDをターゲットにできない理由を教えてください。section

は、次を取得するために私はすべての

var target = $(this).next('section').attr('id'); 
var target = $(this).parent().parent().next('section').attr('id'); 
var target = $(this).parent().next('section').attr('id'); 
var target = $(this).parent().find('section').attr('id'); 

を試みたが、next('.section')期間に選択.next-slide

$(function(){ 
    $(".next-slide").on('click', function(event) { 
     event.preventDefault(); 
     var target = $(this).next('section').attr('id'); 
     target = "#"+target; 
     console.log(target); 
     $('html, body').animate({ 
     scrollTop: $(target).offset().top 
     }, 800, function(){ 
     }); 
    }); 
}); 

Answer 1

$.next()は、ターゲット隣接する次の要素を、そして自分のページ上.next-slideリンクの隣にある何のsectionはありません。あなたがクリックしているリンクの隣にsection相対をターゲットにするには、リンクの親sectionを見つける必要があり、その後、

$.next()を経由して次の sectionをターゲットあなたは $.closest()を使用して、リンクの親 sectionを見つけることができ、あなたのセレクタに一致する最初の祖先を返します。その後 $.next('section')を使用して、それ以降の sectionをターゲティングします。

最寄り

$(function(){ 
 
    $(".next-slide").on('click', function(event) { 
 
     event.preventDefault(); 
 
     var target = $(this).closest('section').next('section').attr('id'); 
 
     target = "#"+target; 
 
     console.log(target); 
 
     $('html, body').animate({ 
 
     scrollTop: $(target).offset().top 
 
     }, 800, function(){ 
 
     }); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<section id="section1"> 
 
<div class="col-md-12 box" id="box-1"> 
 
    <div class="cover"> 
 
     <img src='http://placehold.it/50x50/f3f5f6/f3f5f6' /> 
 
    </div> 
 
    <div class="cover"></div> 
 
    <div class="col-md-12 up-pointer"> 
 
    </div>  
 
    <div class="col-md-12 down-pointer"> 
 
    <a role="button" class="pointer next-slide"> 
 
    <img src="http://www.caapc.ca/wp-content/uploads/2016/09/map-marker-2-xxl.png" class="img-responsive" width="40px" height="40px" /> 
 
     </a> 
 
    </div> 
 
</div> 
 
</section> 
 
<section id="section2"> 
 
<div class="col-md-12 box" id="box-1"> 
 
    <div class="cover"> 
 
     <img src='http://placehold.it/50x50/f3f5f6/f3f5f6' /> 
 
    </div> 
 
    <div class="cover"></div> 
 
    <div class="col-md-12 up-pointer"> 
 
    </div>  
 
    <div class="col-md-12 down-pointer"> 
 
    <a role="button" class="pointer next-slide"> 
 
    <img src="http://www.caapc.ca/wp-content/uploads/2016/09/map-marker-2-xxl.png" class="img-responsive" width="40px" height="40px" /> 
 
     </a> 
 
    </div> 
 
</div> 
 
</section> 
 
<section id="section3"> 
 
<div class="col-md-12 box" id="box-1"> 
 
    <div class="cover"> 
 
     <img src='http://placehold.it/50x50/f3f5f6/f3f5f6' /> 
 
    </div> 
 
    <div class="cover"></div> 
 
    <div class="col-md-12 up-pointer"> 
 
    </div>  
 
    <div class="col-md-12 down-pointer"> 
 
    <a role="button" class="pointer next-slide"> 
 
    <img src="http://www.caapc.ca/wp-content/uploads/2016/09/map-marker-2-xxl.png" class="img-responsive" width="40px" height="40px" /> 
 
     </a> 
 
    </div> 
 
</div> 
 
</section> 
 
<section id="section4"> 
 
<div class="col-md-12 box" id="box-1"> 
 
    <div class="cover"> 
 
     <img src='http://placehold.it/50x50/f3f5f6/f3f5f6' /> 
 
    </div> 
 
    <div class="cover"></div> 
 
    <div class="col-md-12 up-pointer"> 
 
    </div>  
 
    <div class="col-md-12 down-pointer"> 
 
    <a role="button" class="pointer next-slide"> 
 
    <img src="http://www.caapc.ca/wp-content/uploads/2016/09/map-marker-2-xxl.png" class="img-responsive" width="40px" height="40px" /> 
 
     </a> 
 
    </div> 
 
</div> 
 
</section>

Answer 2

あなたが不足している次のセクションのIDをつかむことができませんでした。隣接する兄弟クラスをクラス "セクション"で選択する場合は、 .next('.section')を使用します。

大丈夫、作業here！

$(function(){ 
    $(".next-slide").on('click', function(event) { 
     event.preventDefault(); 
     var target = $(this).parents('section').next('section').attr('id'); 
     target = "#"+target; 
     console.log(target); 
     $('html, body').animate({ 
     scrollTop: $(target).offset().top 
     }, 800, function(){ 
     }); 
    }); 
}); 

Answer 3

var target = $(this).parent().closest('section').attr('id'); 

（）セット内の各要素について、要素自体をテストし、その祖先を介してアップトラバースすることによってセレクタに一致する最初の要素を取得しますDOMツリー。

最も近い部分を使用して、必要なセクションを取得します。これを試してみてください。

Working Fiddle

Closest Doc