如何将每个图像添加到<div>

Question

我在父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只是为了使输出更加可见。

Answer 2

使用本机js，您可以创建包装函数

function createWrapper(parentSelector) {
  let elem = document.querySelector(parentSelector);
  let getChildren = elem.querySelectorAll('img');
  elem.innerHTML = '';
  getChildren.forEach(function(item) {
    let crtElem = document.createElement('div');
    crtElem.setAttribute('class', 'addDiv');
    crtElem.appendChild(item);
    elem.appendChild(crtElem)
  })
}
createWrapper('.post-sl')

.addDiv {
  border: 1px solid red;
}

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

Answer 3

使用wrap（）函数

$('image-link).wrap('<div class='addDiv'></div>')