如何包装到树中的单个对象？

Posted 2021-03-27

我不确定如何说出这个问题，所以请提前抱歉让我感到困惑。我需要将一个对象（或某种等价物）包装到一个对象树中。

正在包装的内容的html：

<div class="border-wrapper">
  <div class="topbar"></div>
  <div class="border-shell">
    <div class="border-inside">ELEMENT THAT WILL BE WRAPPED SHOULD END UP HERE</div>
  </div>
</div>

最初我试图这样做：

$(obj).wrap('<div class="border-wrapper"><div class="topbar"></div><div class="border-shell"><div class="border-inside"></div></div></div>');

但它会将对象包装成.topbar。

然后我尝试在没有.topbar的情况下换行并在之后添加它，但没有任何内容可以预先设置。我对before()的尝试也没有奏效。

我甚至尝试过使用多个换行（在元素周围包裹.border-inside和.border-shell，然后插入.topbar和.wrapAll()）但似乎没有任何效果。我的猜测是它全部并行而不是按顺序发射。

修改如下添加下面/后：

之前：

<span>test</span>

后：

<div class="border-wrapper">
  <div class="topbar"></div>
  <div class="border-shell">
    <div class="border-inside"><span>test</span></div>
  </div>
</div>

答案

我在包装文档页面上没有看到任何表明它可以处理多个标签和元素的内容。

就像你试过的测试一样：

$(obj).wrap('<div class="border-inside"></div>').wrap('<div class="border-wrapper"></div>');

看看它做了什么

另一答案

这很hacky - 但是你可以做这样的事 -

HTML

<span class="inner">ELEMENT THAT WILL BE WRAPPED SHOULD END UP HERE</span>

jQuery的

var elemhtml = $(".inner").clone().wrap('<div></div>').parent().html();
$(".inner").html('<div class="border-wrapper"><div class="topbar"></div><div class="border-shell"><div class="border-inside">' + elemhtml + '</div></div></div>');

但是ーzxsw poi