title: Why doesnt next() work in jquery
body: <p>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.</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li id="one" style="display:block; width: 20px; height: 20px; background: lightgrey; margin:4px;"&gt;1&lt;li&gt;
      &lt;li id="two" style="display:block; width: 20px; height: 20px; background: lightgrey; margin:4px;"&gt;2&lt;li&gt;
      &lt;li id="three" style="display:block; width: 20px; height: 20px; background: lightgrey; margin:4px;"&gt;3&lt;li&gt;
      &lt;li id="four" style="display:block; width: 20px; height: 20px; background: lightgrey; margin:4px;"&gt;4&lt;li&gt;
      &lt;li id="five" style="display:block; width: 20px; height: 20px; background: lightgrey; margin:4px;"&gt;5&lt;li&gt;
  &lt;/ul&gt;
  
  &lt;div class="div"&gt;
      &lt;p&gt;Hello&lt;/p&gt;
      &lt;span&gt;Bye&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My Jquery: </p>
  
  <pre><code>$(function(){
      $('#two').next().css('color','red');
      $('.div p').css('color','red');
  });
  </code></pre>
  
  <p><strong>EDIT: My li tags are not closed. That is causing the problem</strong></p>