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

时间:2011-09-12 08:39:23

标签: javascript jquery

我不确定如何说出这个问题,所以对于任何混淆事先抱歉。我需要将一个对象(或某种等价物)包装到一个对象树中。

正在包装的内容的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&amp; .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>

2 个答案:

答案 0 :(得分:1)

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

<强> 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>');

演示 - http://jsfiddle.net/Apc8c/

答案 1 :(得分:0)

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

正如您尝试过的测试一样:

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

看看它做了什么