JQuery遍历，无法正确使用.next()

Question

有人可以向我解释一下为什么 .next() 在这个例子中没有像我期望的那样工作吗:

HTML 结构

<p>
  <ol>
    <li><a href="#q1">Question 1 Link</a></li>
    <li><a href="#q2">Question 2 Link</a></li>
  </ol>
</p>
<p>
  <a name = "q1"></a><div>Question 1... <br /> Answer 1...</div>
  <a name = "q2"></a><div>Question 2... <br /> Answer 2...</div>
</p>

Jquery(目的是突出显示与点击的链接相关的问题+答案div)

$(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');
    }); 
});

但是这不起作用。如果我放置 console.log(target.html())在代码中我发现它返回 null .

有关如何找到 <div> 的任何建议它立即出现在 <a name="..."></a> 之后.

Answer 1

这不是对您问题的直接回答。但是，您可以为 div 提供相应的 ID，而不是使用命名 anchor :

<div id="q1">Question 1... <br /> Answer 1...</div>
<div id="q2">Question 2... <br /> Answer 2...</div>

JavaScript

$('a').click(function(){                 
    $(this.href).css('background-color', 'red');
});

元素上的 ID 与命名 anchor 的工作方式相同。

<小时/>

您的 jQuery 代码本身看起来是正确的(也相对于 HTML)。但我怀疑浏览器正在以某种方式纠正生成的 DOM，因为 (afaik) div 元素不允许出现在 p 元素中。

更新:看来我是正确的(或多或少)，at least Chrome produces this (检查 DOM):

<p>
    <a name="q1"></a>
</p>
<div>Question 1... <br> Answer 1...</div>
<a name="q2"></a>
<div>Question 2... <br> Answer 2...</div>
<p></p>

您可以看到第一个 a 元素没有下一个同级元素。不过，它应该适用于第二个。