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;
});

jQuery ScrollTo具有类名的Next和Previous元素

2 个答案: