与えられたクラスの次の要素にhtmlコンテンツを取り込む方法は？

Question

リンクを設定しようとしています。そのリンクをクリックすると、「detailcontainer」クラスの次のdivにhtmlが設定されます。 3つのリンクごとに1つずつ<div class="detailcontainer">があります。これまでのところ、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. 

おかげです。

は固有のIDと各detailcontainerのDIVを識別し、関連するアンカーのクラス名として、そのIDを使用して次のよう

Answer 1

オプションがあります。 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; 
     }); 
    });