Question

请您查看https://facebook.github.io/react-native/docs/running-on-device.html并告诉我为什么我无法定位所选锚点链接的下一个和上一个section的ID？

获取下一个我尝试了所有

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

的下一部分的ID

$(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()定位下一个相邻元素，并且页面上section个链接旁边没有.next-slide。要定位相对于您点击的链接的下一个section，您需要找到该链接的父section，然后通过section <定位下一个$.next() < / p>

您可以使用section找到链接的父$.closest()，$.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>

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

Answer 2

~~next('.section')期间你遗失了。如果要使用类＆＃34;部分＆＃34;选择相邻的兄弟，请使用.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

__getitem__

Closest（）：对于集合中的每个元素，通过测试元素本身并遍历DOM树中的祖先来获取与选择器匹配的第一个元素。

使用最近距离获取您需要的部分。试试这个。

Working Fiddle

Closest Doc

面对jQuery链式目标问题

3 个答案: