如何在特定子元素之后包装段落的内部内容？

Posted 2023-02-25

【中文标题】如何在特定子元素之后包装段落的内部内容？

【英文标题】：How to wrap inner content of a paragraph after specific child element?

【发布时间】：2014-09-05 16:11:57

【问题描述】：

我有几个类似这样的简历：

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt auctor purus, ut cursus quam fringilla id. Suspendisse a libero id mauris faucibus convallis at ut lacus.
  <br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt auctor purus, ut cursus quam fringilla id. Suspendisse a libero id mauris faucibus convallis at ut lacus.
  <br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt auctor purus, ut cursus quam fringilla id. Suspendisse a libero id mauris faucibus convallis at ut lacus.
  <br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt auctor purus, ut cursus quam fringilla id. Suspendisse a libero id mauris faucibus convallis at ut lacus.
  <br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt auctor purus, ut cursus quam fringilla id. Suspendisse a libero id mauris faucibus convallis at ut lacus.
  <br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt auctor purus, ut cursus quam fringilla id. Suspendisse a libero id mauris faucibus convallis at ut lacus.
</p>

不是最漂亮的文本块，但它们是由系统自动生成的。我需要遍历每个<p> 并在第一组中断标签之后获取所有内容并将其包装在<div> 之类的东西中。

最终结果是：

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt auctor purus, ut cursus quam fringilla id. Suspendisse a libero id mauris faucibus convallis at ut lacus.</p>

<div class="theRest">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt auctor purus, ut cursus quam fringilla id. Suspendisse a libero id mauris faucibus convallis at ut lacus.
  <br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt auctor purus, ut cursus quam fringilla id. Suspendisse a libero id mauris faucibus convallis at ut lacus.
  <br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt auctor purus, ut cursus quam fringilla id. Suspendisse a libero id mauris faucibus convallis at ut lacus.
  <br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt auctor purus, ut cursus quam fringilla id. Suspendisse a libero id mauris faucibus convallis at ut lacus.
  <br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt auctor purus, ut cursus quam fringilla id. Suspendisse a libero id mauris faucibus convallis at ut lacus.
</div>
</p>

【问题讨论】：

你可以使用 jquery wrap() api.jquery.com/wrap

@rpogonyi 我试图使用一些涉及包装的东西。 jsfiddle.net/Ldycs37m 恐怕我的结果有点笨。

你需要像这样添加标签 .wrap('')

在我上面的小提琴中，它只包装了第二个中断标记之后的直接元素，而不是第二个中断标记之后的所有内容。我尝试用 nextSibling 代替 nextAll 无效。

将 class="addDiv" 添加到

【参考方案1】：

试试这个（灵感来自@dave 的回答）：

$("p").each(function()

    // Add a div after the second <br /> (in the current <p>)
    $("br:eq(1)", this).after('<div class="theRest"> </ div>');

    // Split each "child" in an array
    $(this).contents().filter(function(index, elem)

        // Keep only children after the <div />
        return index > 3;

    // Remove and put them into the <div />
    ).detach().appendTo($(".theRest", this));
);

Fiddle

【讨论】：

请为您的答案添加一些解释。发布代码对任何人都没有帮助:)

【参考方案2】：

试试这个：

$('p').each(function() 
    $(this).contents(':gt(2)').wrap('<div class="theRest"></div>');
);

但这不是一个足够好的解决方案。

为了防止你的其他 p 元素被包装，你应该从下面的任何父元素中找到：

$('.father').find('p').each(function() 
    $(this).contents(':gt(2)').wrap('<div class="theRest"></div>');
);

【讨论】：

第一个例子似乎是一块一块的，把每一件事都包装在 div 标签中。我最终在每个

然而，在实时站点上，它仍然将每个单独的东西包装在新的 div 中。由于某种原因，每一行，每一 ，所有东西都有自己的 div 包装。

两个html代码可能有一些不同？

【参考方案3】：

试试这个：

$($("p").contents().get(2)).after('<div class="theRest"></div>');
$("p").contents().filter(function(index, element) 
    return index > 3;
).detach().appendTo(".theRest");

Fiddle

【参考方案4】：

即使从服务器返回的格式不符合我的标准，因为它使特定目的的事情变得复杂。但是，通过一些技巧，仍然有办法做到这一点。

说明：选择所有节点，丢弃第一个节点，因为它恰好是文本节点，然后使用 jquery wrapAll 方法获取该节点之后的所有内容并将其包装在新的 div 中。

演示：http://jsfiddle.net/qe3bm92e/3/

var txt = $('.txt').contents();
txt.splice(0,1);
txt.wrapAll($("<div>").addClass('red'));

您可以将'.txt' 替换为'p'，但这不是一个好习惯，原因很明显。