javascript - 获取图片alt，添加为父类

Question

我正在做一些 CSS，但我不太擅长 JavaScript。但是我不允许编辑任何插件文件，所以我想我可以使用一些 JavaScript 来解决我缺少独特类的问题。

我只想拿alt=""图像的 HTML 属性并将其应用为 class=""其父元素的 HTML 属性 <a>元素。

所以代替:

<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>

我需要:

<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>

这是我想做的伪代码:

(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

我怎样才能做这样的事情？

Answer 1

似乎一个简单的 each 就可以做到这一点，假设所有 .img-parent 都将所讨论的 img 作为他们唯一的 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>

(另外，它被称为“psuedocode”)