Question

我有以下html标记，我想要实现的是标记后面的内容被包装在div中

<div class="imageblock">
<img alt="image-alt" src="/images/image.jpg">
Image description
</div>

所以最终的代码必须是这样的：

<div class="imageblock">
<img alt="image-alt" src="/images/image.jpg">
<div class="captionDiv">Image description</div>
</div>

我尝试了很多jquery脚本。

这就是我现在所拥有的：

<script type="text/javascript">
jQuery(document).ready(function($) {
    $('.imageblock img').after().wrapInner('<div class="captionDiv"/>');
});
</script>

我需要使用jQuery执行此操作的原因是我不想触及核心代码（它不能被覆盖，并且不是未来证明）。

任何线索？

Answer 1

您可以使用contents（）和.eq（）

来完成

$('.imageblock').each( function( ) 
{
    $( this ).contents().eq(2).wrap('<div class="captionNew"/>')
});

（这假设您要包装的文本是div中的第二个元素，不包括您所在的元素）

编辑-----我做了一些语法蠢事：p

$( document ).ready( function( )
{
    $('.imageblock').each( function( ) 
    {
        alert( $(this).html());
        $( this ).contents().eq(2).wrap('<div class="captionDiv" />');
    });
});

Answer 2

$('.imageblock').contents().filter(function () {
    return this.nodeType === 3 && $.trim(this.nodeValue).length;
}).wrap('<div class="captionDiv" />');

<强> jsFiddle example

这会产生：

<div class="imageblock">
    <img alt="image-alt" src="/images/image.jpg">
    <div class="captionDiv">Image description</div>
</div>

Answer 3

如果你真的想直接在img标签之后包装那些节点：

var $contents = $(".imageblock").contents();
$('.imageblock img').each(function () {
    $contents.eq($contents.index(this) + 1).wrap('<div class="captionDiv"/>');
});

DEMO

Answer 4

我对这段代码不太满意，因为它非常依赖于你给出的示例HTML。但是，此代码确实生成了您描述的HTML结构：

// cache the container element
var imageblock = $( ".imageblock" );

// copy all children (but not the raw text) 
var elems = imageblock.children();

// remove all existing elements (but not the raw text) 
imageblock.children().remove();  

// wrap the raw text with a div
imageblock.wrapInner( "<div class='captionDiv'>" ); 

// bring back the original child elements
imageblock.prepend( elems );

jsfiddle demo

Answer 5

我的回答显示了一个工作包裹，jsFiddle。

HTML：

<div class="imageblock">
<img alt="image-alt" src="/images/image.jpg">
Image description
</div>

JQuery的：

$(document).ready(function() {
    $(".imageblock").contents().filter(function() {
        return this.nodeType == 3; })
            .wrap("<div class='captionDiv'/>");
});

CSS：

.captionDiv{background-color:yellow;}

用jquery包装图像后的元素

5 个答案:

jsfiddle demo