gpt4 book ai didi

javascript - 我无法选择正确的 div(使用 Jquery)

转载 作者:行者123 更新时间:2023-11-29 20:31:38 24 4
gpt4 key购买 nike

$(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 的事实。

我做错了什么?

抱歉,如果我的解释不清楚,谢谢您的帮助。

最佳答案

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

关于javascript - 我无法选择正确的 div(使用 Jquery),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57838160/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com