JQuery遍历，无法正确使用.next()
JQuery遍历，无法正确使用.next()
提问于 2011-05-06 23:32:55
谁能解释一下为什么.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>的任何建议。
回答 2
Stack Overflow用户
回答已采纳
发布于 2011-05-06 23: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元素没有下一个同级元素。不过，它对第二个应该是有效的。
Stack Overflow用户
发布于 2012-03-07 00: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);这只会选择第一个匹配项。您可能希望创建一个subsequentAll版本，以匹配所有后续出现的内容。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/5913642
复制相关文章
相似问题
腾讯云开发者
