jquery wrap兄弟元素

下面的标记会注入一些额外的元素（例如：包含一些flash的div）。我如何动态地将所有p标签包装在一个div中并在其上添加一个按钮来切换新创建的div？jquery wrap兄弟元素

<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>

来源

2009-10-12 Turbodurso

我会做简单如下：

$('.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); 
});

来源

2009-10-12 18:30:25

我同意托弗。你也想利用jQuery的“live”函数来允许slideToggle事件如下所示： $ j（'h3'）。live（'click'，function（）{$ j（this）.toggleClass（' hideText'）。slideToggle（300）;}）; – 2009-10-12 18:33:56

它明显是一个更简单的解决方案。但标记本身有时会被其他div加载，我只想切换p标签。不幸的是，我没有访问服务器端来改变那里的标记... – Turbodurso 2009-10-13 13:48:09

我只是提取现有的HTML，将其套（文字），然后重新插入。

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

来源

2009-10-12 18:33:41 tvanfosson

是的，这将工作得很好。 – KyleFarris 2009-10-12 18:36:22

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

来源

2009-10-12 18:35:14 KyleFarris

jquery wrap兄弟元素

回答

相关问题