1

我无法弄清楚为什么我不能在 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 标签没有关闭。这导致了问题

4

3 回答 3

4

你没有关闭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');
});

演示。

于 2012-05-05T19:35:43.820 回答
3

您不是关闭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>。

于 2012-05-05T19:35:09.377 回答
2

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

于 2012-05-05T19:31:30.177 回答