为什么next()不能在jquery中工作

7jmck4yq 于 2023-05-17 发布在 jQuery

关注(0)|答案(3)|浏览(139)

我不明白为什么我不能在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标签没有关闭。这是造成问题的原因

jquery

来源：https://stackoverflow.com/questions/10465241/why-doesnt-next-work-in-jquery

3条答案

按热度按时间

li9yvcax1#

你没有关闭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.

赞(0）回复(0）举报 2023-05-17

moiiocjp2#

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

赞(0）回复(0）举报 2023-05-17

ykejflvf3#

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

赞(0）回复(0）举报 2023-05-17

我来回答

为什么next()不能在jquery中工作

3条答案

相关问题

热门标签

最新问答