Question

I have a set of divs with the same class. I need to give each one an individual ID. And then apply that ID to the href of a link.

Here is the HTMl:

<div class="person-promo">
  <a href="***#ID-OF-SIBLING-DIV***" class="action">&gt; Read More</a>
  <div class="hide">
    <div id="***NUMBER-GOES-HERE***" class="person-details">
      <!-- -->
    </div>
  </div>
</div><!-- Person Promo -->

Each anchor needs to link to its sibling Div, if that makes sense.

I have been hunting around various sites, and the Jquery library for a few hours, but have had no luck. Just hoping for a bit help.

Thanks for everyone’s help by the way. It’s good to know SOME fellow developers will help each other out during difficulties. It is a great community on here.

Answer 1

Easy enough:

// Loop through the divs
$(".person-promo .person-details").each(function(i) {
    // Store an id with format "uniqueId_{index}" in a variable.
    var id = "uniqueId_" + i;
    // Give the ID to the div
    $(this).attr("id", id);
    // Give it to the sibling link
    $(this).siblings("a").attr("href", "#" + id);
});

That said, you should probably generate all this server-side.