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：

，而不是使用命名锚点

<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与命名锚点的作用相同。

您的jQuery代码本身看起来是正确的（也与HTML有关）。但我怀疑浏览器正在以某种方式更正生成的DOM，因为div元素中不允许（afaik）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元素没有下一个兄弟。它应该适用于第二个。

Answer 2

我需要一个不涉及锚点和解决方案的解决方案。 IDS。

这个插件会在整个DOM中查找下一个出现的内容，而不仅仅是兄弟姐妹 - 我认为这是您最初预期的方式。

换句话说，如果您正在查看标记，那么您看到的下一个标记与选择器匹配的是什么：

(function($){
  $.fn.subsequent = function(selector) {  
    var subsequent = $();       
    this.parents().andSelf().each(function() {
      $(this).nextAll().each(function(){

          //check self
          subsequent = $(this).filter(selector);
          if(subsequent.length > 0) return false;   

          //check kids
          subsequent = $(this).children(selector);
          return subsequent.length == 0;                
      });
      return subsequent.length == 0;   
    });
    return subsequent.first();
  };
})(jQuery);

Here is a JS Fiddle example

这仅选择第一个出现次数。您可能希望制作subsequentAll版本以匹配所有后续事件。

JQuery遍历，正确使用.next（）时遇到麻烦

2 个答案: