2010-05-25 69 views
2

我遇到了一种情况,我需要以某种方式编辑以下内容,在某些情况下(让我们假设“click”事件)需要删除(或解开?).container.header,并且.itemlist仍然可见/可用在页面上。然后,我需要将.container.header重新恢复到其他某个事件,同时仍然保留a标记上的事件侦听器,并且如果可能的话,无需从DOM中删除所述项目。这可能吗?删除/恢复元素,维护它们的事件和元素的子元素

<ul class="container"> 
    <li class="header"><a href="#">delete</a> | <a href="#">edit</a></li> 
    <ul class="itemlist"> 
     <li>some item</li> 
     <li>some other item</li> 
    </ul> 
</ul> 

回答

0

DEMO:http://jsbin.com/iwiju3

这只是一个概念验证,不知道是你想要的,但让我知道!

$(function() { 
    $("button").toggle(function() { 
     $(".container").wrap('<span></span>'); //wrap all with span 
     $(".itemlist").unwrap(); //unwrap container 
     $(".header").hide(); //hide header 
    }, 
    function() { 
     $("span").wrap('<ul class="container"></ul>'); //rewrap with container 
     $(".itemlist").unwrap(); //remove span 
     $(".header").show(); //show header 
    }); 
}); 

注意:如果你需要在第二次再次创建.header,没有任何理由将其删除,只是躲起来! .container可以解开,但由于.header.itemlist是两个不同的元素,你需要用它来包装它,如<span>第二次包装它!