我无法处理 select 正确的 div（使用 Jquery）

Question

$(document).ready(function() {
  $(".myClass").click(function () {
    $(".myClass", $(this)).first().scrollIntoView({behavior: "smooth",block: "start"});
  });
});

.myClass {
  cursor: pointer;
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class=myClass>I click on this div
</div>
<div class=otherClass>Some random text
</div>
<div>
<div class=otherClass>Some random text
</div>
<div>
<div class=myClass>I want to scroll to this div
</div>

这是我的问题，这种模式在我的页面中重复了好几次。 Div 具有 class "otherClass" 以可变数量动态生成。

<div>
    <div class=myClass>
    </div>
</div>
<div>
    <div class=otherClass>
    </div>
</div>
<div>
    <div class=otherClass>
    </div>
</div>
<div>
    <div class=myClass>
    </div>
</div>

我的目标是点击 "myClass" div 向下滚动 window（使用 scrollIntoView()）到下一个 div class。

我在每个 "myClass" div 上添加了一个点击事件，但我无法 select 下一个。我试图向我的 select 或 $(".myClass", $(this)) 添加上下文以仅在单击 div 后进行搜索，但它不起作用（总是返回当前的 div ？）。

我也尝试过使用 next() 到 "move" 到下一个 div 但我正在努力解决 "otherClass" div他们之间。

我做错了什么？

抱歉，如果我的解释不清楚，谢谢你的帮助。

Answer 1

不需要 jQuery 这将起作用。

这是 fiddle 示例：https://jsfiddle.net/e1xz74wj/

JS

let scrollToNext = 0;
const elements = document.querySelectorAll('.myClass');

document.getElementById('btn').addEventListener('click', () => {
  ++scrollToNext
  if (scrollToNext < elements.length) {
    elements[scrollToNext].scrollIntoView();
  }
})

解释：

单击按钮滚动到所需元素（按指定类名查找元素）后增加计数器。

每次单击时，计数器都会递增 1，因此会选择下一个元素。当计数器达到已找到元素的最大数量时，它不再递增。

Answer 2

直到你的 html 结构 .myClass 没有任何下一个 .myClass .. 请参阅下一个代码

$('.myClass').on('click' , function(){
  $(this)
  .parent() // select the parent div
  .nextAll('div:has(.myClass)') // select the next div which has .myClass in it
  .first() // select just one div next
  .find('.myClass') // find the .myClass in this div
  .addClass('Next'); // add class to it
});

.Next{
  background : red;
  color : #fff;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
    <div class=myClass>myClass</div>
</div>
<div>
    <div class=otherClass>Other</div>
</div>
<div>
    <div class=otherClass>Other</div>
</div>
<div>
    <div class=myClass>myClass</div>
</div>
<div>
    <div class=otherClass>Other</div>
</div>
<div>
    <div class=otherClass>Other</div>
</div>
<div>
    <div class=myClass>myClass</div>
</div>

附加：如果你需要反转你需要使用prevAll而不是nextAll和.last()而不是.first()

我无法处理 select 正确的 div（使用 Jquery）

I can't handle to select the correct div (using Jquery)

javascript

jquery

jquery-selectors