我无法选择正确的div(使用jquery)

$(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>

这是我的问题,我有一个模式,它在我的页面中重复了好几次。具有类“otherClass”的div是以可变数量动态生成的。

<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向下滚动窗口(使用 scrollIntoView() )同一个班级的下一个div。

我在每个“MyClass”div上添加了一个单击事件,但我无法选择下一个。我试图在选择器中添加上下文 $(".myClass", $(this)) 只在单击的div之后搜索,但不起作用(总是返回当前div?).

我也试过用 next() 去“移动”到下一个div,但我正在挣扎,因为它们之间有一个未知的“otherclass”div数字。

我做错什么了?

对不起,如果我的解释不清楚,谢谢你的帮助。