Javascript (jQuery): next() 给了我“li.next()”而不是“li”答案

【问题标题】：Javascript (jQuery): next() gives me "li.next()" instead of "li"Javascript (jQuery): next() 给了我“li.next()”而不是“li”
【发布时间】：2011-08-21 21:41:21
【问题描述】：

令人困惑的标题，是吗？我尽量解释清楚。

我的意思是，如果我有这样的菜单：

<ul>
    <li> Home </li>
    <li class="current"> Portfolio </li>
    <li> Store </li>
    <li> About </li>
</ul>

并使用 .next() 方法从当前元素中获取下一个元素：

$('ul li.current').next()

结果选择器是：

ul li.current.next()

而不是真正的选择器。我的意思是，我不能使用 CSS 定位 ul li.current.next()（因此它不是“真正的”选择器）。真正的选择器看起来像ul li。

有什么办法可以得到下一个元素的“真正的”选择器？

【问题讨论】：

你能展示更多的js吗？
有什么问题？你想获得一个等效的 CSS 选择器吗？
如果您使用var test = $('#ul li'); alert(test.html()); test = test.next(); alert(test.html());，它会按预期工作吗？我认为您的选择器太窄而无法正常工作。

标签： jquery selector next

【解决方案1】：

$('ul li.current').next() 将简单地返回下一个<li>。它会返回

<li> Store </li>

【讨论】：

【解决方案2】：

如果你想要等效的 CSS 选择器，那就是：

ul li.current + li

见：Adjacent sibling selector

注意：Not supported in IE6.

还要注意，jQuery 不使用 CSS 选择器来匹配所有元素。选择器语法与 CSS 类似（它是一个超集），因为它似乎是最自然的方式。它尽可能使用浏览器提供的方法（例如querySelectorAll），但它还必须遍历 DOM 才能找到元素。

例如您永远无法将$('td').closest('tr') 与 CSS 匹配，因为您无法使用 CSS“向上移动”。

我希望这能回答你的问题，如果没有，请澄清一下。

【讨论】：

太酷了，虽然哈哈 ie6 bahh
事实证明我不需要这样做，但我仍然需要知道如何去做，并且您的解决方案有效。谢谢！（我在 6 个月前停止支持 IE，所以不用担心！）

【解决方案3】：

这行得通：

$(document).ready(function() {
  var $li = $("ul li.current").next();
  $li.css("font-weight", "bold");
});

或者您可以跳过 var 分配并像这样访问它：

$("ul li.current").next().css("text-decoration", "underline");

【讨论】：