为什么 next() 在 jquery 中不起作用答案

【问题标题】：Why doesnt next() work in jquery为什么 next() 在 jquery 中不起作用
【发布时间】：2012-05-05 19:27:38
【问题描述】：

我不知道为什么我不能在 jquery 中选择下一个列表项。但是，我可以在 p 标签之后拿起 span 标签。为什么是这样？请不要只引用我的 jquery 手册，因为我显然不理解它。提前致谢。

<ul>
    <li id="one" style="display:block; width: 20px; height: 20px; background: lightgrey; margin:4px;">1<li>
    <li id="two" style="display:block; width: 20px; height: 20px; background: lightgrey; margin:4px;">2<li>
    <li id="three" style="display:block; width: 20px; height: 20px; background: lightgrey; margin:4px;">3<li>
    <li id="four" style="display:block; width: 20px; height: 20px; background: lightgrey; margin:4px;">4<li>
    <li id="five" style="display:block; width: 20px; height: 20px; background: lightgrey; margin:4px;">5<li>
</ul>

<div class="div">
    <p>Hello</p>
    <span>Bye</span>
</div>

我的 Jquery：

$(function(){
    $('#two').next().css('color','red');
    $('.div p').css('color','red');
});

编辑：我的 li 标签没有关闭。这导致了问题

【问题讨论】：

你的代码有语法错误，括号不平衡，所以它什么也没做
谢谢改变了。仍然有我的问题
在你的每个
中添加一个 EmptyClass 类并写入 $('#two').next('.EmptyClass').css('color', 'red');跨度>

【解决方案1】：

你没有关闭li标签（我已经修好了）

<ul>
    <li id="one" style="display:block; width: 20px; height: 20px; background: lightgrey; margin:4px;">1</li>
    <li id="two" style="display:block; width: 20px; height: 20px; background: lightgrey; margin:4px;">2</li>
    <li id="three" style="display:block; width: 20px; height: 20px; background: lightgrey; margin:4px;">3</li>
    <li id="four" style="display:block; width: 20px; height: 20px; background: lightgrey; margin:4px;">4</li>
    <li id="five" style="display:block; width: 20px; height: 20px; background: lightgrey; margin:4px;">5</li>
</ul>

<div class="div">
    <p>Hello</p>
    <span>Bye</span>
</div>

$(function(){
    $('#two').next().css('color','red');
    $('.div p').css('color','red');
});

DEMO.

【讨论】：

【解决方案2】：

您没有关闭li 标签，而是打开新标签。因此，您选择的下一个li 是空的，而不是可见的，因此您看不到任何结果

所以你正在做<li>...<li>，它以（在浏览器解析你的 HTML 之后）结束：

<li id="one">1</li>
<li></li>
<li id="two">2</li>
<li></li>                 <-- this one is selected
<li id="three">3/<li>

解决方法是正确关闭标签<li>...</li>。

【讨论】：

【解决方案3】：

您的 li 元素末尾缺少“/”：</li>

【讨论】：

你能解释一下吗？另外我只想要下一个，不是全部
谢谢，问题出在结尾。谢谢大家
@Esailija 你是对的，一旦修复，一切正常，但 +1 表示 Roko 发现它