Как обернуть элементы родного брата?

Question

В следующей разметке будут добавлены некоторые дополнительные элементы (например, a 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);
});