Javascript: 是否可以只查询某个class之后的n个元素？

Question

JS 新手。有没有一种简单的方法可以仅查询某个 element/class 之后的下一个 n 个元素？兄弟元素，而不是子元素。例如，假设我有这个 html:

<span>Empty</span>
<span>Empty</span>
<div class="start">Empty Block</div>
<span>Content 1</span>
<span>Content 2</span>
<span>Content 3</span>
<span>Content 4</span>
<span>Content 5</span>

我想执行 document.querySelect，但我只想带回 <div class="start"> 之后的前 3 个跨度（因此，只有内容 1、内容 2 和内容 3）。在 JS 中是这样的：

startingDiv = document.getElementsByClassName('.start');
allSpansAfterDiv = $(".start").nextAll('span');
targetSpans = allSpansAfterDiv[0,3];

最后一行是我希望 return div 下的前 3 个跨度，但在控制台日志中它只是 return 我拥有的最后一项括号，所以 [3]，相当于 HTML.

中的 <span>Content 4</span>

我试着看看我是否可以让这两个 jQuery 选项也起作用：

选项 1：

$('span:lt(4)');

选项 2：

$('span').slice(0,4)

但是这些将针对页面上的所有跨度。我不确定如何仅在 <div class="start">.

之后才开始计算跨度

如何只选择 <div class="start"> 之后的前 3 个跨度？

如果它有助于了解我在现实生活中使用它的目的：

我有一个包含 20 个博客 post 的页面，每个 post 包含在一个 <article> 标签中。我想首先显示最近的 5 个 posts，点击“加载更多”按钮可以显示接下来的 5 个 posts。我想告诉“加载更多”按钮获取接下来的 5 个 <article> 元素并将它们从 display: none 更改为 display: block。现在，我想弄清楚的是如何定位按钮之后的下 5 篇文章。每次点击按钮在页面上的位置都会不断变化。

Answer 1

你走在正确的轨道上。您可以 slice() nextAll()

返回的集合

或者在 nextAll()

中使用 :lt(3) 选择器

对于“显示更多”，您可以使用 :gt() 隐藏大于阈值的那些，然后使用 slice() 或 :lt() 过滤 :hidden你想给他们看

$('.start').nextAll('span').slice(0,3).css('color','red')
$('.start').nextAll('span:lt(3)').css('background-color','yellow')

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span>Empty</span>
<span>Empty</span>
<div class="start">Empty Block</div>
<span>Content 1</span>
<span>Content 2</span>
<span>Content 3</span>
<span>Content 4</span>
<span>Content 5</span>

Javascript: 是否可以只查询某个class之后的n个元素？

Javascript: Can I query for only the next n elements after a certain class?

javascript

jquery

next