如何用html内容填充给定类的下一个元素？

问题描述

| 我正在尝试建立一组链接，以便在单击一个链接时，使用某些html填充类为“ detailcontainer \”的下一个div。每3个链接后有一个

<div class=\"detailcontainer\">

。到目前为止，我拥有的jQuery看起来像这样。显然，按原样将html注入到每个“ 0”中。我如何优化此内容，以便仅将内容加载到下一个？

<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用作相关锚点的类名。在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;
       });
   });