Как заполнить следующий элемент данного класса HTML-контентом?

Question

Я пытаюсь настроить набор ссылок, чтобы при щелчке по одной из них следующий div с классом detailcontainer заполнялся каким-то html. Существует один <div class="detailcontainer"> после каждых 3 ссылок. Пока что jQuery у меня выглядит вот так. Очевидно, что, как это, HTML вводится в каждый <div class="detailcontainer">. Как я могу уточнить это так, чтобы контент загружался только в следующий ??

<script type="text/javascript">
jQuery(document).ready(function(jQuery) {
jQuery("a.click").click(function(){
jQuery(".detailcontainer").html("<p>content goes here.</p>");
return false;
});
});
</script>

Моя HTML-структура выглядит следующим образом ...

<div class="set">
<div><a href="#" class="click">link</a></div>
<div><a href="#" class="click">link</a></div>
<div><a href="#" class="click">link</a></div>
</div>
<div class="detailcontainer"></div>
<div class="set">
<div><a href="#" class="click">link</a></div>
<div><a href="#" class="click">link</a></div>
<div><a href="#" class="click">link</a></div>
</div>
<div class="detailcontainer"></div>
etc. etc.

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

Answer 1

Вариант выглядит следующим образом:

Идентифицируйте каждый элемент detailcontainer с уникальным идентификатором и используйте этот идентификатор в качестве имени класса связанных якорей.В JS используйте кликнувшее имя класса для обновления соответствующего контейнера.

<div class="set">
<div><a href="#" class="click1">link</a></div>
<div><a href="#" class="click1">link</a></div>
<div><a href="#" class="click1">link</a></div>
</div>
<div id="click1" class="detailcontainer"></div>
<div class="set">
<div><a href="#" class="click2">link</a></div>
<div><a href="#" class="click2">link</a></div>
<div><a href="#" class="click2">link</a></div>
</div>
<div id="click2" class="detailcontainer"></div>

Вот обновленный код JS:

jQuery(document).ready(function(jQuery) {
       jQuery("a").click(function(){
       var divid = this.className;
       jQuery("#"+divid).html("<p>content goes here.</p>");
       return false;
       });
   });