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

Stack Overflow用户

提问于 2011-05-06 15:32:55

回答 2查看 71关注 0票数 4

谁能解释一下为什么.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>

question+answer (目的是突出显示与点击的链接相关的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。

关于如何找到紧跟在<a name="..."></a>之后的<div>的任何建议。

jquery

云点播特惠1元起

提供三端 SDK 、云 API、控制台等多种上传方式，弱网环境下文件上传成功率达到 99.5%

回答 2

Stack Overflow用户

回答已采纳

发布于 2011-05-06 15:37:06

这不是对你问题的直接回答。但是，您可以为divs提供相应的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，因为(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元素没有下一个同级元素。不过，它对第二个应该是有效的。

票数 4

Stack Overflow用户

发布于 2012-03-06 16:19:52

我需要一个不涉及锚和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);