Javascript（jQuery）：next（）给了我“li.next（）”而不是“li”

Question

令人困惑的头衔，对吧？我尽力解释它。

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

<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。

有没有办法获得下一个元素的“真实”选择器？

Answer 1

如果你想要等效的CSS选择器，它将是：

ul li.current + li

请参阅：Adjacent sibling selector

注意： Not supported in IE6。

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

E.g。你永远不能将$('td').closest('tr')与CSS匹配，因为你不能用CSS“向上移动”。

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

Answer 2

$('ul li.current').next()只会返回下一个<li>。它会返回

<li> Store </li>

Answer 3

这有效：

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

或者你可以跳过var赋值并像这样访问它：

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