Элементы смешения jquery wraps

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>"); 

Если делать то, что вам требуется.

Edit 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); 
});