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

Jean Blaguin • 7 年前 • 1775 次点击

$(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数字。

我做错什么了?

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

Python社区是高质量的Python/Django开发社区
本文地址：http://www.python88.com/topic/39609

文章 [ 2 ] | 最新文章 7 年前

• 1 楼

Eugene Sunic 7 年前

这将不需要jquery。

下面是小提琴的例子: https://jsfiddle.net/yd8pbzLr/

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

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

说明:

在单击按钮滚动到所需的元素(按指定的类名查找元素)后,递增计数器。

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

• 2 楼

Mohamed-Yousef 7 年前

直到你的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()

登录后回复