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.

alt=""

class=""

<a>

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?

<img>

alt

3 Answers
3

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>

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

each

.img-parent

img

$('.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")

.replace

psuedocode

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

<a>

$('.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>

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.