jQuery ScrollTo下一个和上一个具有类名称的元素

Question

在此示例中，您如何上下移动？ 这来自上一个问题，但是我不确定在添加父容器div时如何进行横向处理。 如果您删除容器div，则一切正常，但是我需要容器。 另外，它将需要跳过没有课程帖子的div。 我对可能使用parent（），next（），find（）等感到困惑。

http://jsfiddle.net/bs6443y4/148/

HTML：

    <nav>
      <a href="#" id="down">Down</a>
      <a href="#" id="up">Up</a>
    </nav>
    <div class="container">
      <div class="post one">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam nisi veniam doloribus iste cumque sint facere consequuntur quas blanditiis nam consequatur molestias quo distinctio ab repellendus sequi saepe. Vel nisi.
      </div>
    </div>
<div class="container">
  <div>
    Skip me Because I am not a div with class post
  </div>
</div>
<div class="container">
  <div>
    Skip me Because I am not a div with class post
  </div>
</div>
    <div class="container">
      <div class="post two">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam rerum laboriosam at eum soluta itaque temporibus voluptatibus officia dicta amet quas vero ab eos magni molestiae. Debitis velit consectetur reiciendis.
      </div>
    </div>
<div class="container">
  <div>
    Skip me Because I am not a div with class post
  </div>
</div>
    <div class="container">
      <div class="post three">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam rerum laboriosam at eum soluta itaque temporibus voluptatibus officia dicta amet quas vero ab eos magni molestiae. Debitis velit consectetur reiciendis.
      </div>
    </div>

JS：

var $currentElement = $(".post").first();
    $("#down").click(function() {
      var $nextElement = $currentElement.next('.post');
      if ($nextElement.length) {
        $currentElement = $nextElement;
        $('html, body').stop(true).animate({
          scrollTop: $nextElement.offset().top
        }, 1000);
      }
      return false;
    });

    $("#up").click(function() {
      var $prevElement = $currentElement.prev('.post');
      if ($prevElement.length) {            
        $currentElement = $prevElement;
        $('html, body').stop(true).animate({
          scrollTop: $prevElement.offset().top
        }, 1000);
      }
      return false;
    });

Answer 1

我看到了您的更新，您不能仅将滚动更改为使用container ，因为您只想滚动到具有post元素的容器。

您仍然可以通过使用container （因为它是主容器）来实现这一点，我们只需要更改选择器以将post也考虑在内。 您也可以直接滚动到post元素，它稍微复杂一点。 简单总是更好，因此我将首先解释滚动到容器！

选项1：滚动到container有一个孩子类元素post

为此，您只需要对当前代码进行3次更改：

// 1. set currentElement to the first container (it doesn't matter if it has a post, it's just our starting point)
var $currentElement = $(".container").first(); 

$("#down").click(function() {
    //2. select the next container that has a post
    var $nextElement = $currentElement.nextAll(":has(.post):first");
    [...]
});

$("#up").click(function() {
    //3. select the previous container that has a post
    var $prevElement = $currentElement.prevAll(":has(.post):first");
    [...]
});

这是做什么的：

• nextAll() / prevAll() ：获取当前元素之后/之前的所有同级元素...
• :has(.post) ：那个孩子有post类...
• :first ：并选择第一个作为我们的下一个元素

工作示例：

Jsfiddle： http : //jsfiddle.net/g7juv0hw/或可运行的代码段：

 var $currentElement = $(".container").first(); $("#down").click(function() { var $nextElement = $currentElement.nextAll(":has(.post):first"); if ($nextElement.length) { $currentElement = $nextElement; $('html, body').stop(true).animate({ scrollTop: $nextElement.offset().top }, 1000); } return false; }); $("#up").click(function() { var $prevElement = $currentElement.prevAll(":has(.post):first"); if ($prevElement.length) { $currentElement = $prevElement; $('html, body').stop(true).animate({ scrollTop: $prevElement.offset().top }, 1000); } return false; }); 

 body, html { padding: 0; margin: 0; height: 100%; width: 100%; background: yellow; } .container, .post { height: inherit; width: inherit; } .one { background: orange; } .two { background: blue; } .three { background-color: green; } nav { position: fixed; bottom: 50px; left: 50px; z-index: 999; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <nav> <a href="#" id="down">Down</a> <a href="#" id="up">Up</a> </nav> <div class="container"> <div class="post one">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam nisi veniam doloribus iste cumque sint facere consequuntur quas blanditiis nam consequatur molestias quo distinctio ab repellendus sequi saepe. Vel nisi. </div> </div> <div class="container"> <div> Skip me Because I am not a div with class post </div> </div> <div class="container"> <div> Skip me Because I am not a div with class post </div> </div> <div class="container"> <div class="post two">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam rerum laboriosam at eum soluta itaque temporibus voluptatibus officia dicta amet quas vero ab eos magni molestiae. Debitis velit consectetur reiciendis. </div> </div> <div class="container"> <div> Skip me Because I am not a div with class post </div> </div> <div class="container"> <div class="post three">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam rerum laboriosam at eum soluta itaque temporibus voluptatibus officia dicta amet quas vero ab eos magni molestiae. Debitis velit consectetur reiciendis. </div> </div> 

选项2：滚动到post元素

由于post元素不是直接的兄弟姐妹，因此实现起来有点复杂。 您需要执行以下操作：

// 1. set currentElement to the first post (this is what you already have, I've just included it as a comparison to option 1)
var $currentElement = $(".container").first(); 

$("#down").click(function() {
    //2. select the next sibling of the parent (container) that has a post
    var $nextElement = $currentElement.parent().nextAll(":has(.post):first").find(".post").first();
    [...]
});

$("#up").click(function() {
    //3. select the previous sibling of the parent that that has a post
    var $prevElement = $currentElement.parent().prevAll(":has(.post):first").find(".post").first();
    [...]
});

这是做什么的：

• parent() ：获取当前元素（即容器）的父元素...
• nextAll() / prevAll() ：然后获取当前元素之后/之前的所有同级元素...
• :has(.post) ：那个孩子有post类...
• :first ：然后选择第一个...
• find(".post") ：并获取所有具有post类的子级
• first() ：然后选择这些元素中的第一个作为当前元素

工作示例：

小提琴： http : //jsfiddle.net/g7juv0hw/1/或代码段：

 var $currentElement = $(".post").first(); $("#down").click(function() { var $nextElement = $currentElement.parent().nextAll(":has(.post):first").find(".post").first(); if ($nextElement.length) { $currentElement = $nextElement; $('html, body').stop(true).animate({ scrollTop: $nextElement.offset().top }, 1000); } return false; }); $("#up").click(function() { var $prevElement = $currentElement.parent().prevAll(":has(.post):first").find(".post").first(); if ($prevElement.length) { $currentElement = $prevElement; $('html, body').stop(true).animate({ scrollTop: $prevElement.offset().top }, 1000); } return false; }); 

 body, html { padding: 0; margin: 0; height: 100%; width: 100%; background: yellow; } .container, .post { height: inherit; width: inherit; } .one { background: orange; } .two { background: blue; } .three { background-color: green; } nav { position: fixed; bottom: 50px; left: 50px; z-index: 999; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <nav> <a href="#" id="down">Down</a> <a href="#" id="up">Up</a> </nav> <div class="container"> <div class="post one">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam nisi veniam doloribus iste cumque sint facere consequuntur quas blanditiis nam consequatur molestias quo distinctio ab repellendus sequi saepe. Vel nisi. </div> </div> <div class="container"> <div> Skip me Because I am not a div with class post </div> </div> <div class="container"> <div> Skip me Because I am not a div with class post </div> </div> <div class="container"> <div class="post two">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam rerum laboriosam at eum soluta itaque temporibus voluptatibus officia dicta amet quas vero ab eos magni molestiae. Debitis velit consectetur reiciendis. </div> </div> <div class="container"> <div> Skip me Because I am not a div with class post </div> </div> <div class="container"> <div class="post three">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam rerum laboriosam at eum soluta itaque temporibus voluptatibus officia dicta amet quas vero ab eos magni molestiae. Debitis velit consectetur reiciendis. </div> </div> 

Answer 2

如果您确定起始.post将存在于容器DIV则应该可以使用：

$("#down").click(function() {
  var $parentNext = $currentElement.parent().next();
  while ($parentNext.length > 0) {
    if ($parentNext.find('.post').length > 0) {
      $nextElement = $($parentNext.find('.post')[0]);
      $currentElement = $nextElement;
      $('html, body').stop(true).animate({
        scrollTop: $nextElement.offset().top
      }, 1000);
      return false;
    }
    $parentNext = $parentNext.next();
  }
  return false;
});

$("#up").click(function() {
  var $parentPrev = $currentElement.parent().prev();
  // Check if previous element actually exists
  while ($parentPrev.length > 0) {
    if ($parentPrev.find('.post').length > 0) {
      var $prevElement = $($parentPrev.find('.post')[0]);
      $currentElement = $prevElement;
      $('html, body').stop(true).animate({
        scrollTop: $prevElement.offset().top
      }, 1000);
      return false;
    }
    $parentPrev = $parentPrev.prev();
  }
  return false;
});