Question

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

<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>");
});

Demo

Answer 2

我将使用div标签包装我的所有图像

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

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

<强> WORKING DEMO

但是，要将每张图片包装在单独的div中，请为我编写代码is working。

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>

如何用div标签包装img元素

3 个答案: