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

请参阅：相邻同级选择器

注意： IE6 不支持。

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

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

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

Answer 2

$('ul li.current').next() 将仅返回下一个

。它会返回

<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");