JQuery traversal, trouble using .next() correctly
<p>Could someone explain to me why .next() is not working as I expect it to in this example:</p>

<p>HTML Structure</p>

<pre><code>&lt;p&gt;
  &lt;ol&gt;
    &lt;li&gt;&lt;a href="#q1"&gt;Question 1 Link&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#q2"&gt;Question 2 Link&lt;/a&gt;&lt;/li&gt;
  &lt;/ol&gt;
&lt;/p&gt;
&lt;p&gt;
  &lt;a name = "q1"&gt;&lt;/a&gt;&lt;div&gt;Question 1... &lt;br /&gt; Answer 1...&lt;/div&gt;
  &lt;a name = "q2"&gt;&lt;/a&gt;&lt;div&gt;Question 2... &lt;br /&gt; Answer 2...&lt;/div&gt;
&lt;/p&gt;
</code></pre>

<p>Jquery (Purpose is to highlight the question+answer div relating to the link which was clicked on)</p>

<pre><code>$(function() {      
    $('a').click(function(){
        href = $(this).attr('href').split('#')[1];
        target = $('a[name="'+href+'"]').next('div');
        // For simplicity in the example, I will simply highlight in red.                        
        target.css('background-color', 'red');
    }); 
});
</code></pre>

<p>However this isn't working. If I place a <code>console.log(target.html())</code> in the code I find that it returns <code>null</code>.</p>

<p>Any suggestions on how I can find the <code>&lt;div&gt;</code> which appears immediately after <code>&lt;a name="..."&gt;&lt;/a&gt;</code>.</p>
