如何用div标签包装img元素

Question

我将用一个div标签包装我的所有图像，该标签有一个名为image的类，我就像jquery网站一样，但它不起作用。 这是我的代码：

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script type="text/javascript">

$(document).ready(function(){

    $( ".post img" ).wrap( "<div class='new'></div>" );
});
    </script>

这是我的HTML代码：

<div class="post">
        <img src="some where" alt="here"/>
        <img src="some where" alt="here"/>
        <img src="some where" alt="here"/>
        <img src="some where" alt="here"/>                                    
    </div>

Answer 1

您需要遍历图像并将其包装起来

$(".post img").each(function(index, element) {
    $(element).wrap("<div class='new'></div>");
});

演示

Answer 2

我打算用div标签包装我的所有图像

为了将所有图像包装在包装器中，您需要使用.wrapAll()方法。

$(".post img").wrapAll("<div class='new'></div>");

工作演示 。

然而，在一个单独的div包裹每一个形象，你的代码工作对我来说。

Answer 3

使用javascript包装带有div标签的img元素

 var imgs = document.getElementsByTagName("img"); for (var i = 0; i < imgs.length; i++) { let element =imgs[i]; var parent = element.parentNode; var wrapper = document.createElement('div'); wrapper.classList.add("new"); parent.replaceChild(wrapper, element); wrapper.appendChild(element); } 

 <div class="post"> <img src="some where" alt="here"/> <img src="some where" alt="here"/> <img src="some where" alt="here"/> <img src="some where" alt="here"/> </div>