Question

我无法理解为什么我不能在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标签未关闭。这导致了问题

Answer 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.

Answer 2

您没有关闭li代码，而是关闭新代码。因此，您选择的下一个li是空的，而不是可见的<li>...<li>，因此您看不到结果

所以你正在做的<li id="one">1</li> <li></li> <li id="two">2</li> <li></li> <-- this one is selected <li id="three">3/<li>以（在浏览器解析你的HTML之后）结束：

<li>...</li>

解决方案是正确关闭代码{{1}}。

Answer 3

您的li元素最后缺少'/'：</li>＆lt; - CORRECT

为什么nextnt（）不能在jquery中工作

3 个答案: