Question

我尝试在startpost和endpost div之间包装所有内容我使用了nextUntil和wrapAll但结果是包装内容而没有自由文本我该如何解决？

$('.startpost').nextUntil('.endpost')
       .wrapAll('<div style="background:red" class="shortpost"></div>');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="post">
  <div class="startpost"></div>
  <a href="http://www.example.com"></a> Hello world!<br>Hello world!
  <div class="endpost"></div>
</div>

Answer 1

为什么不使用wrapInner（demo）？

$('.post').wrapInner('<div style="background:red" class="shortpost"></div>');

更新：如果您不想包含开头和＆amp;结束帖子元素，试试这个（demo）：

$('.post').each(function () {
    var include = false;
    $(this).contents().filter(function () {
        var c = this.className;
        if (/startpost|endpost/.test(c)) {
            include = c === 'startpost';
            return false;
        }
        return include && ( this.nodeType === 3 || this.nodeType === 1 );
    }).wrapAll('<div style="background:red" class="shortpost"></div>');
});

Answer 2

根据jQuery文档： http://api.jquery.com/wrapall/

在跨距周围包裹新创建的对象树。请注意，在此示例中，跨度之间的任何内容都会被忽略（红色文本）。即使是跨距之间的空白也被排除在外。

您可以/应该做的是将"Hello world!<br>Hello world!"放在<span>。

中

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="post">
  <div class="startpost"></div>
  <a href="http://www.example.com"></a> <span>Hello world!<br>Hello world!</span>
  <div class="endpost"></div>
</div>

这将按预期包装。

话虽如此，你可以用不同的方式做你想做的事（如果你想排除startpost，endpost）：

var inArea = false;
$(".post").contents().each(function() {
    console.log($(this));
    if ($(this).hasClass('startpost'))
        inArea = true;
    else if ($(this).hasClass('endpost'))
        inArea = false;
    else if (inArea)
        $(this).wrap('<div style="background:red" class="shortpost"></div>');
});

或：

var inArea = false;
$(".post").contents().each(function() {
    console.log($(this));
    if ($(this).hasClass('startpost'))
        inArea = true;
    if (inArea)
        $(this).wrap('<div style="background:red" class="shortpost"></div>');
    if ($(this).hasClass('endpost'))
        inArea = false;
});

如果你想加入它们。

Answer 3

这是一个解决方法，首先将<span>中包含邮政容器子项的任何文本节点包装起来，以便它们包含在包装中：

$('.post').contents().each(function () {
    if (this.nodeType === 3) {
        $(this).wrap('<span>');
    }
}).end().find('.startpost')
    .nextUntil('.endpost')
    .wrapAll('<div style="background:red" class="shortpost"></div>');

由于空白和换行确实会留下一些空的空间，但如果有必要，可以对其进行一些调整

DEMO

jQuery wrap所有内容包括两个标签之间的文本

3 个答案: