Question

I can’t seem to figure out how I would go about adding a class to a group of elements inside their parent.

Example:

<div class="block">
  <a href="#" class="thumbnail"></a>
  <a href="#" class="thumbnail"></a>
  <a href="#" class="thumbnail"></a>
</div>
<div class="block">
  <a href="#" class="thumbnail"></a>
  <a href="#" class="thumbnail"></a>
  <a href="#" class="thumbnail"></a>
</div>

I would like it to look like so:

<div class="block">
  <a href="#" class="thumbnail group1"></a>
  <a href="#" class="thumbnail group1"></a>
  <a href="#" class="thumbnail group1"></a>
</div>
<div class="block">
  <a href="#" class="thumbnail group2"></a>
  <a href="#" class="thumbnail group2"></a>
  <a href="#" class="thumbnail group2"></a>
</div>

I tried something like:

$("div.Block a").attr("class", function (arr) {
  return "group" + arr;
});

but that returns the class inside the blocks to all have different numbers instead of in groups. Maybe something like using that on the parent div and somehow copying the master div class to each of its children after?

Answer 1

You can do this using the following code

$("div.block").each(function(index){
  $(this).find('a').addClass("group" + (index+1));
})