在<h3>标签opan之后添加<div>并在使用jquery标记之前关闭</h3> </div>

时间:2014-10-22 04:59:38

标签: javascript jquery arrays html5

我想用div包装文本,有人可以帮我怎样才能做到这一点。我无法改变我的html结构,因此我需要使用jquery。

这是我的HTML代码

<div>
<h3>Title 1</h3>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<br />
<br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

<h3>Title 1</h3>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<br />
<br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>

这里是js

$('h3').each(function(){
    $(this).nextUntil('h3')
        .wrapAll('<div>').parent().add(this)
        .wrapAll('<li>').parent().appendTo(h3);
});

here is jsfiddle link

提前致谢

1 个答案:

答案 0 :(得分:3)

你可以这样做

$('div').contents().filter(function() {
    return this.nodeType === 3;
}).wrap('<div></div>');

这将选择所有纯文本并用div元素

包装

Demo Fiddle

修改

这样就可以了,

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

$("h3").each(function() {
    $(this).nextUntil("h3").wrapAll("<div class='wraper'></div>");
});

$(".temp").contents().unwrap();

Updated Fiddle