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>

这是我的问题，我有这种模式在页面中重复多次。具有“ 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上添加了一个click事件，但是我无法选择下一个。我试图将上下文添加到选择器$(".myClass", $(this))中，以便仅在单击div之后搜索，但是它不起作用（总是返回当前的div吗？）。

我还尝试使用next()“移动”到下一个div，但是我为它们之间存在未知数量的“ otherClass” div感到困惑。

我在做什么错了？

对不起，如果我的解释不清楚，谢谢您的帮助。

Answer 1

这将不需要jQuery。

以下是小提琴示例：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();
  }
})

说明：

单击按钮后滚动到所需元素（通过指定的className查找元素），然后增加计数器。

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

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

我无法选择正确的div（使用Jquery）

2 个答案: