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

Posted 2023-05-09

【中文标题】我无法选择正确的 div（使用 Jquery）

【英文标题】：I can't handle to select the correct div (using Jquery)

【发布时间】：2020-01-10 06:50:24

【问题描述】：

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

我做错了什么？

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

【参考方案1】：

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

【参考方案2】：

这不需要 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();
  
)

说明：

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

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

【讨论】：

感谢您的帮助，遗憾的是我只能接受一个答案来解决问题，但您的解决方案也非常有用

您不应该将btn 视为（希望是）ID 元素。始终使用getElement* 或querySelector*

@RokoC.Buljan 这只是一个关于如何解决 OP 问题的示例......但我当然应用了你的建议并更新了 fiddle.js 示例