Question

Check a few of the other post and found the code I needed, but doesn’t do exactly what I need it to do.

I want to add a class to the parent element based on the alt tag of an image.

So from this:

<div class="img-wrap">
   <div class="img-icon">
      <a href="">
         <img alt="home" />
      </a>
   </div>
</div>

To this:

<div class="img-wrap home">
   <div class="img-icon">
      <a href="">
         <img alt="home" />
      </a>
   </div>
</div>

Here’s the code I’m using:

$('img').each(function() {
$(this).parent().addClass( $(this).attr('alt') );
});

While this adds the needed class, it adds it to the “a”… however I want it to add to the #img-wrap. How can I do this?

Answer 1

ID should be unique.. You should not duplicate ID like that. Try changing it to class class="img-wrap" and check out the below code.

HTML:

<div class="img-wrap">
   <div class="img-icon">
      <a href="">
         <img alt="home" />
      </a>
   </div>
</div>

Code:

$('img').each(function () {
   $(this).closest('.img-wrap').addClass(this.alt);
});