javascript - 如何将每个图像添加到 中

Question

这个问题已经有答案了:

How to wrap img element with a div tag (2 个回答)

已关闭 4 年前。

我在父 div (.post-sl) 中有一个图像列表，我想为每个图像添加类。如何使用 jQuery 或 Javascript 来做？谢谢!

<div class="post-sl">
    <img src="image-link-01.png" alt="">
    <img src="image-link-02.png" alt="">
    <img src="image-link-03.png" alt="">
    <img src="image-link-04.png" alt="">
    <img src="image-link-05.png" alt="">
</div>

我想要的结果:

<div class="post-sl">
    <div class="addDiv">
        <img src="image-link-01.png" alt="">
    </div>
    <div class="addDiv">
        <img src="image-link-02.png" alt="">
    </div>
    <div class="addDiv">
        <img src="image-link-03.png" alt="">
    </div>
    <div class="addDiv">
        <img src="image-link-04.png" alt="">
    </div>
</div>

Answer 1

您可以使用wrap()为此:

$('.post-sl img').wrap('<div class="addDiv"></div>');

img {
  background-color: #CCC;
  width: 20px;
  height: 20px;
  display: block;
} 

.addDiv {
  padding: 5px;
  border: 1px solid #C00;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="post-sl">
  <img src="image-link-01.png" alt="">
  <img src="image-link-02.png" alt="">
  <img src="image-link-03.png" alt="">
  <img src="image-link-04.png" alt="">
  <img src="image-link-05.png" alt="">
</div>

请注意，上面的 CSS 只是为了使输出更加可见。