CODEWITHSUNDEEP
javascriptjquerycss
KYSSE
KYSSE

Reputation: 385

Get image alt, add as parent class

I'm doing some CSS and I'm not great with JavaScript. However I'm not allowed to edit any of the plugin files, so I thought I could use some JavaScript to solve my issue of missing unique classes.

I just want to take the alt="" HTML attribute from an image and apply it as class="" HTML attribute to its parent <a> element.

So instead of:

<div class="wrapper-class">    
    <a class="img-parent">
        <img alt="image 1" src="">
    </a>    
    <a class="img-parent">
        <img alt="image 2" src="">
    </a>    
    <a class="img-parent">
        <img alt="image 3" src="">
    </a>    
</div>

I need:

<div class="wrapper-class">    
    <a class="img-parent image-1">
        <img alt="image 1" src="">
    </a>    
    <a class="img-parent image-2">
        <img alt="image 2" src="">
    </a>    
    <a class="img-parent image-3">
        <img alt="image 3" src="">
    </a>    
</div>

Here's the pseudocode I would like to do:

(1) $ Function = ('**.wrapper-class**')
(2) IF (**this**) contains **img**
(3) GET image **alt value**
(4) if (this) contains ('**a**')
(6) Replace **alt** value empty space with - and apply **alt** value to **a** element as class
(7) else = do nothing

How can I do something like this?

Upvotes: 2

Views: 1118

Answers (3)

CertainPerformance
CertainPerformance

Reputation: 370879

Seems like a simple each would do it, assuming all .img-parents have the img in question as their only child:

$('.img-parent').each(function() {
  this.classList.add(this.children[0].alt.replace(/ /g, '-'));
});
console.log(document.body.innerHTML);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper-class">

  <a class="img-parent">
    <img alt="image 1" src="">
  </a>

  <a class="img-parent">
    <img alt="image 2" src="">
  </a>

  <a class="img-parent">
    <img alt="image 3" src="">
  </a>

</div>

(Also, it's called "psuedocode")

Upvotes: 1

Kl&#237;mačka
Kl&#237;mačka

Reputation: 281

First, let me say that it's not a very good idea to use alt attribute value and use it as class name. Assuming the alt attribute gets generated from filename, the filename permits characters which are illegal to use as CSS class names.

I.e.: picture+label.jpg and picture.with.label.jpg are perfectly valid filenames. Let's say the gallery strips the file extension at least, you get picture+label and picture.with.label as alt attributes both of which cannot be used as class names because dot and plus sign have special meanings in CSS selectors.

So to be safe, you might want to do some escaping of the value before using it as class name.

I suggest:

(function addClasses() {
    $('.wrapper-class img').each(function (i, image) {
        var imageElem = $(image);
        var altValue = imageElem.attr("alt"); // Use .attr, not .prop as alt is always a string.
        if (!altValue)
            return; // either skip to next if image has no alt value or use some default value
        
        // Replace invalid characters here, i.e. using Regular expression
        altValue = altValue.replace(/[^a-z0-9\-_]/gi, "_");

        // .closest() allows the image to be wrapped in another element/s beside the link
        imageElem.closest("a.img-parent").addClass(altValue);
    });
})();
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<div class="wrapper-class">
  <a class="img-parent"><img alt="image-1"></a>
  <a class="img-parent"><img alt="image-2"></a>
  <a class="img-parent"><img alt="image-3"></a>
</div>

Upvotes: 0

the_goat
the_goat

Reputation: 116

This should find images and add alt attribute to <a> parent's class

$('.wrapper-class img').each(function(){
  $(this).parent('a').addClass($(this).prop('alt').replace(/\s/g,'-'));
  //$(this).parent('a').addClass($(this).prop('alt'));
});
console.log($('.wrapper-class').html())
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper-class">

  <a class="img-parent">
    <img alt="im a flower" src="">
  </a>

  <a class="img-parent">
    <img alt="image-2" src="">
  </a>

  <a class="img-parent">
    <img alt="image-3" src="">
  </a>

</div>

Upvotes: 0

Related Questions