我在父 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>
最佳答案
您可以使用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 只是为了使输出更加可见。
关于javascript - 如何将每个图像添加到 <div> 中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55167827/