jquery wrap 형제 요소

Question

다음 마크 업에는 일부 추가 요소가 주입됩니다 (예 : 일부 플래시가 포함 된 div). 어떻게 하나의 div에 p 태그를 모두 동적으로 랩핑하고 새로 만든 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); 
});