jQuery Tree Traversing, чтобы выбрать следующий div

Question

Ищете способ выполнить заполнение div с помощью jQuery, пересекая .., в котором я не гожусь.

Мой код имеет ряд 6 коробок, а затем окно контента .. еще 6 коробок и коробку контента, как так:

<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> 

То, что я ищу, когда кто-то нажимает на изображение - это заполняет только следующий .content div.

Заранее спасибо.

=== Для Гюго .. Ближайший я получил, что, очевидно, заполнит все поля контента является:

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

Answer 1

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

Answer 2

$('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() является хотя и менее сложный.)

Answer 3

Для этого вам необходимо использовать соответствующий traversal functions. «Лучшая» версия зависит от вашей разметки и относительной стабильности ее различных частей, но теперь давайте просто работать с HTML, который вы даете.

Начиная с любого <img>, вы хотите перейти к его родительскому .box, а затем ищите следующие .content. Перевод с JQuery:

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