Search code examples
jqueryjquery-selectors

Why doesnt next() work in jquery

I cannot work out why i cannot pick up the next list item in jquery. However, I can pick up the the span tag after the p tag. Why is this? Please do not just quote me the jquery manual, because I am obviously not understanding it. Thanks in advance.

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

My Jquery: 

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

EDIT: My li tags are not closed. That is causing the problem

Solution

  • Your li elements are missing the '/' at the end: </li> <-- CORRECT