JQuery: select the next div outside the parent div

Question

Well, it seems to me that I missed something very simple, but here it goes:

This code works fine, exactly the way I want. You click on the link, and the next div is displayed (there are about 10 on the page)

$('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> 

However, I want to change the HTML like this (link inside a 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> 

^^ What is not working properly.

What do I need to change in my jquery to make this work? I’ve been searching the Internet for a long time, and a number of solutions in such messages do not seem to work.

Answer 1

$(".addtask").parent().next(".field") should work

Answer 2

I made full baskets for the above problem.

DEMO: http://codebins.com/bin/4ldqp9y

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

 .field{ padding:7px; border:1px solid #4455f9; background:#74cca9; } 

JQuery

 $(function() { $('a.addtask').click(function() { $(this).closest('.field').next('.field').slideToggle(); return false; }); }); 

Answer 3

Try the following: $(".addtask").nextAll('.field').first()