如何包装兄弟元素？

Question

以下标记会注入一些额外的元素（例如：包含一些闪存的div）。

如何在一个p中动态包装所有div标记，并在其上方添加一个按钮以切换新创建的div？

<div class="post">
  <p>blquehrgéoqihrteoijth</p>
</div>

<div class="post">
  <p>blquehrgéoqihrteoijth</p>
  <p>blquehrgéoqihrteoijth</p>
  <p>blquehrgéoqihrteoijth</p>
  <p>blquehrgéoqihrteoijth</p>
</div>

Answer 1

为简单起见，我会做以下事情：

$('.post').prepend("<h3 class='showText'>biography</h3>\n<div class='toggle'>");
$('.post').append("</div>");

应该做你需要的。

编辑1：此处添加了cballou的评论代码，以便于阅读：

$j('h3').live('click', function() {
  $j(this).toggleClass('hideText').slideToggle(300);
});

Answer 2

我只是提取现有的HTML并将其包装（作为文本），然后重新插入。

$('.post').each( function() {
    $(this).html('<h3 class="showText">biogrpahy</h3><div class="toggle">'
                  + $(this).html()
                  + '</div>');
});

Answer 3

$j('.post').wrapAll("<div class='toggle'></div>");
$j('.toggle').before('<h3 class="showText">bibliography</h3>');
$j('h3').live('click',function(){
    $j(this).toggleClass('hideText');
    $j('.toggle').slideToggle(300);
});