jquery - 将多个元素内容包装在一个段落中

Question

我有一个包含多个文本和子元素的元素。我想将它们包裹在一个段落中

我知道如何将单个文本元素包装在它们自己的 p 元素中，但我想在该 p 元素中包含任何子元素(如果它们分隔文本)。

元素内容:

[text, h4, text, sub, text, sub, text, sub, text, br, br, br, center, br, br, br, text]

注意 模式 text -> sub -> text -> sub...我想将所有这些元素包装在一个 p 元素中(sub“分隔”文本，因此被认为一部分)

我目前拥有的代码:

$(".back .main-text")
  .contents()
  .filter(function() {
    return this.nodeType === 3;
  })
  .wrap("<p></p>")
  .end();

初始 html:

<div class="text-center main-text">                      
<h4>Header</h4> Text with no p<sub>a</sub>, p<sub>b</sub>, and p<sub>c</sub> some other text here 
<br><br>
</div>

预期输出:

<div class="text-center main-text">
<h4>Header</h4> <p>Text with no p<sub>a</sub>, p<sub>b</sub>, and p<sub>c</sub> some other text here</p> 
<br><br></div>

实际输出:

<div class="text-center main-text"><p>                      
</p><h4>Header</h4><p> Text with no p</p><sub>a</sub><p>, p</p><sub>b</sub><p>, and p</p><sub>c</sub><p> some other text here 
</p></div>

Answer 1

我想出了工作代码，虽然它不是很漂亮:)

contents = $('#main-card .back .main-text').contents();

main_parent = $('<div>');
save = $('<p>');

$.each(contents, function(i, content) {
  content = $(content).clone();
  if (content.prop("tagName") == "BR" || content.prop("tagName") == "CENTER" || $.trim(content.text()) != "") {
    tag = content.prop("tagName");
    if (typeof tag != "undefined" && tag != "SUB") {
      if ($.trim(save.html()) != "") {
        main_parent.append(save);
        save = $('<p>');
      }
      main_parent.append(content);
    } else {
      save.append(content);
    }
  }
})

if ($.trim(save.html()) != "") {
  main_parent.append(save);
}

$('#main-card .back .main-text').html(main_parent.html());

感谢反馈