javascript jQuery：选择父div之外的下一个div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11604696/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery: select next div outside of parent div
提问by Clayton Correia
Ok, I feel like I"m missing something really simple but here goes:
好吧，我觉得我错过了一些非常简单的东西，但这里有：
This code works great, exactly the way I want it to. You click the link and the next div is revealed (There are about 10 of these on a page)
这段代码效果很好，正是我想要的方式。您单击该链接并显示下一个 div（页面上大约有 10 个）
$('a.addtask').click(function(){
$(this).next('.field').slideToggle();
return false;
});
<div class="field">
Some content
</div>
<a href="#" class="addtask">Add a task</a>
<div class="field" style="display:none;">
some other content
</div>
What I want to do however is change the HTML like so (link inside the div):
然而，我想要做的是像这样更改 HTML（div 内的链接）：
<div class="field">
Some content
<a href="#" class="addtask">Add a task</a>
</div>
<div class="field" style="display:none;">
some other content
</div>
^^Which doesn't work properly anymore.
^^这不再正常工作了。
What do I need to change in my jquery to make this work? I've been googling for a while now and a number of solutions in similar posts dont seem to be working.
我需要在我的 jquery 中更改什么才能使其正常工作？我已经在谷歌上搜索了一段时间，类似帖子中的许多解决方案似乎都不起作用。
回答by Naren
$(".addtask").parent().next(".field")should work
$(".addtask").parent().next(".field")应该管用
回答by Alexey Kalinin
Try this: $(".addtask").nextAll('.field').first()
试试这个： $(".addtask").nextAll('.field').first()
回答by gaurang171
I have done complete bins for above issue.
我已经为上述问题完成了完整的垃圾箱。
DEMO:http://codebins.com/bin/4ldqp9y
演示：http : //codebins.com/bin/4ldqp9y
HTML:
HTML：
<div class="field">
Some content
<a href="#" class="addtask">
Add a task
</a>
</div>
<div class="field" style="display:none;">
some other content
</div>
CSS:
CSS：
.field{
padding:7px;
border:1px solid #4455f9;
background:#74cca9;
}
JQuery:
查询：
$(function() {
$('a.addtask').click(function() {
$(this).closest('.field').next('.field').slideToggle();
return false;
});
});
