Question

I’m trying to set up a set of links so that when one is clicked, the next div with the class “detailcontainer” is populated with some html. There is one <div class="detailcontainer"> after every 3 links. So far, the jQuery I have looks like this. Obviously, as it is, the html is injected into every <div class="detailcontainer">. How can I refine this so that the content is only loaded into the next one??

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

My html structure is as follows…

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

Thanks in advance.

Answer 1

An option is as follows:

Identify each detailcontainer div with a unique id and use that id as the classname of related anchors. In JS use the clicked classname to update the respective container.

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

Here is the updated JS code:

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