jQuery: prev(<selector>) 不工作？

Posted 2023-05-09

【中文标题】jQuery: prev(<selector>) 不工作？

【英文标题】：jQuery: prev(<selector>) not working?

【发布时间】：2011-07-24 02:24:45

【问题描述】：

我在 jQuery 中使用 prev() 时遇到问题，它没有选择正确的元素。

我的html结构如下：

<section id="about">
    ...
</section>
<hr>
<section id="contact">
    ...
</section>

“活动”部分是#contact。我想选择上一节跳过<hr>

active = active.prev('section') 似乎不起作用。我想我可能读错了文档...

如果我取出<hr>，一切都会很好。关于如何跳过 prev() 上的<hr> 的任何想法？

TIA

【参考方案1】：

我想我可能读错了文档...

API docs for .prev() 给出这样的描述：

描述： 获取匹配元素集中每个元素的前一个兄弟元素，可选地由选择器过滤。

所以，问题在于hr 存在并且被.prev() 搜索，然后针对'section' 选择器进行测试。

---

关于如何跳过 prev() 上的<hr> 有什么想法吗？

您可以调用一次.prev() 以跳过该hr，然后再次调用该部分：

active = active.prev().prev('section');

或使用.prevAll() 并找到最接近的前一个（以防在它之前出现任何其他部分）：

active = active.prevAll('section').first();

【讨论】：

谢谢！所以无论选择器是什么，prev() 都是到下一个兄弟的一步？我在想 prev('section') 会匹配匹配选择器的第一个前一个兄弟。我使用 prevAll('section').first() 似乎最近的兄弟在数组的开头。但仍然感谢您将我推向正确的方向！ :)

@Jules 是对的。答案应该更新。需要.first() 而不是.last()。

是的，当提问者一开始就指出同样的事情时，我什至承认了这一点。我终于更新了答案。

【参考方案2】：

改用prevAll()

active = active.prevAll('section').first();

来自 jQuery 文档：

prev() => "获取前一个兄弟" 所以它只会获取第一个元素。

prevAll() => "获取匹配元素集中每个元素的所有前面的兄弟，可选地由选择器过滤。"

这就是为什么当您删除 <hr> 时，它将与 prev() 一起使用。

【参考方案3】：

或者试试：

<section id="about">
    ...
<hr>
</section>
<section id="contact">
    ...
</section>

【参考方案4】：

做吧

active = active.prevAll('section').eq(0);

似乎 .prev() 和 .next() 只选择最近的兄弟，无论您是否为其提供特定的选择器。如果该选择器与兄弟不匹配，.next('section').length 将为 0。 因此，通过使用上述方法，您可以获得与您的选择器匹配的所有前面的兄弟姐妹，并使用 .eq(0) 选择最接近的兄弟姐妹。