为啥 next() 在 jquery 中不起作用

Posted 2023-02-25

【中文标题】为啥 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');跨度>

li 结束标签应该是</li>，而不是<li>。您将所有其他列表项都留空，.next() 选择其中之一。

@Juhana 这就是问题所在，谢谢

【参考方案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>​

JS

$(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 发现它