Question

我如何使用jQuery在两个连续元素周围添加<div>？

例如，我有一个img后跟一个span：

<img class="img-responsive" width="850" height="567" title="Title text..." alt="Alt text..." src="image.jpg">
<span class="img-caption">Caption text...</span>

跨度包含用作图像标题的文本，因此我想将这两个元素包装在<div>中，以便我可以绝对定位标题以覆盖图像。

我已经使用$( "img" ).before( "<div class='img-container'>" );打开div，$( ".img-caption" ).after( "</div>" );在跨度后关闭它，但是当我查看页面源时div已经打开但随后自动关闭跨度后没有插入结束标记的迹象。这就是源代码：

<div class="img-container"></div>
<img class="img-responsive" width="850" height="567" title="Title text..." alt="Alt text..." src="image.jpg">
<span class="img-caption">Caption text...</span>

我做错了什么？

这是我使用的jQuery函数：

function captionImg() {
    $("img").each(function() {
    $( "img" ).before( "<div class='image-container'>" );
    var imageCaption = $(this).attr("alt");
    if (imageCaption != '') {
        var imgWidth = $(this).width();
        var imgHeight = $(this).height();
        var position = $(this).position();
        var positionTop = (position.top + imgHeight)
        $(".img-caption").remove(); // Remove any existing captions before adding, so multiple copies don't appear on window resize
        $("<span class='img-caption'>"+imageCaption+"</span>")
        .css({"position":"absolute", "bottom":"20px", "left":"36px", "width":imgWidth +"px"})
        .insertAfter(this);
    }
    $( ".img-caption" ).after( "</div>" );          
    });
 }

非常感谢任何帮助和建议。感谢。

使用jQuery围绕两个元素包装<div>

0 个答案: