Javascript：我可以只查询某个类之后的下 n 个元素吗？

Question

JS 新手。有没有一种简单的方法可以只查询某个元素/类之后的下一个 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];

最后一行是我希望返回 div 下的前 3 个 span，但在控制台日志中它只返回括号中的最后一项，所以 [3]，相当于 <span>Content 4</span>在 HTML 中。

我试着看看我是否可以让这两个 jQuery 选项也能正常工作：

选项 1：

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

选项 2：

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

但这些将针对页面上的所有跨度。我不知道如何仅在 <div class="start"> 之后开始计算跨度。

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

如果知道我在现实生活中试图用它做什么有帮助：

我有一个页面，上面有 20 篇博客文章，每篇文章都包含在 <article> 标记中。我想首先显示 5 个最近的帖子，您可以单击“加载更多”按钮来显示接下来的 5 个帖子。我想告诉加载更多按钮来获取接下来的 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>