jQuery Tree Traversing to select next div

Question

Looking for a way to accomplish populating a div with jQuery, traversing.. which I'm no good at.

My code has a series of 6 boxes and then a content box.. another 6 boxes and a content box like so:

<div class='box'><img src='x' /></div>
<div class='box'><img src='x' /></div>
<div class='box'><img src='x' /></div>
<div class='box'><img src='x' /></div>
<div class='box'><img src='x' /></div>
<div class='box'><img src='x' /></div>
<div class='box'><img src='x' /></div>
<div class='content'></div>
<div class='box'><img src='x' /></div>
<div class='box'><img src='x' /></div>
<div class='box'><img src='x' /></div>
<div class='box'><img src='x' /></div>
<div class='box'><img src='x' /></div>
<div class='box'><img src='x' /></div>
<div class='box'><img src='x' /></div>
<div class='content'></div>

What I am looking for is when somebody clicks on the image - it populates the next .content div only.

Thanks in advance.

=== For Hugo.. The closest I got, which obviously populates all the content boxes is:

$(".box img").click(function(){
                $(this).parent().parent().find(".content").html("X");
            });

Can you show us some part of code you tried? We can help you fix code but won't write you a whole part of code... — Hugo Dozois, Mar 27 '13 at 21:39

score 3 · Accepted Answer · answered Mar 27 '13 at 21:42

3

$('.box img').click(function(){
   $(this).parent().nextAll('.content').first().text('...');
})

answered Mar 27 '13 at 21:42

Ram

143,282
16
168
197

1

Augh, *44 seconds!* And, obviously, +1. – David Thomas Mar 27 '13 at 21:43

score 1 · Answer 2 · answered Mar 27 '13 at 21:42

1

You need to use the appropriate traversal functions for this. The "best" version depends on your markup and the relative stability of its various pieces, but for now let's just work with the HTML you give.

Starting from any <img>, you want to move up to its parent .box and then look for the next .content. Translating to jQuery:

$(this).parent().nextAll(".content").first()

answered Mar 27 '13 at 21:42

Jon

428,835
81
738
806

Thanks for the more thorough explanation Jon - appreciated. – david_o Mar 27 '13 at 21:46

Blazemonger · Answer 3 · 2013-03-27T21:47:02.683

0

$('img').click(function() {
  var $nextdiv = $(this).parent().nextUntil('.content').addBack().last().next();
  // do something with it
});

http://jsfiddle.net/mblase75/gRKfa/

http://api.jquery.com/nextUntil

(.nextAll().first() is rather less complicated, though.)

edited Mar 27 '13 at 21:47

answered Mar 27 '13 at 21:41

Blazemonger

90,923
26
142
180

jQuery Tree Traversing to select next div

3 Answers3