如何使用jquery删除子元素

我有列表。如何使用jquery删除子元素

<ul id="main"> 
    <li><a href="#">Blah ...</a></li> 
    <li><a href="#">Blah ...</a></li> 
    <li><a href="#">Blah ...</a></li> 
    <li id="more">More 
     <ul> 
     <li><a href="#">Blah ...</a></li> 
     <li><a href="#">........</a></li> 
     <li><a href="#">........</a></li>  
     </ul> 
    </li> 
</ul>

主要列表显示给用户。当用户悬停超过列表项目更多。他看到更多列表的下拉菜单。当用户点击列表项中的更多列表。它应该代替第3个孩子在主要列表和第3个项目将被添加到#more列表。

我很感激任何帮助。

来源

2011-08-10 Josh Randall

CSS

#more ul { display: none; }

的Javascript

$('#more').hover(function() { $('ul', this).show(); }, 
       function() { $('ul', this).hide(); }); 

$('#more li a').live('click', function() {  
    $(this).before($('#main > li:last-child').prev()); 
    $('#main > li:last-child').before(this); 
});

工作实施例：http://jsfiddle.net/FishBasketGordo/BAJXB/

编辑：我上述改变click到live和除去一些不必要的代码。

来源

2011-08-10 15:18:49 FishBasketGordo

这应做到：

$('#more li').click(function() { 
    $('#main li').eq(2).replaceWith(this).appendTo('#more'); 
});

对于徘徊，看看http://api.jquery.com/hover/

来源

2011-08-10 14:58:43

$('#more').hover(function(){$('#more ul').show();}, function(){$('#more ul').hide();}); 

$('#more li').click(function(){ 
    var thirdChild = $('#main li:eq(2)'); 
    thirdChild.replaceWith(this).appendTo('#more'); 
});

来源

2011-08-10 15:00:00 J0HN

这里是工作demo

$(function(){ 

$('#more').hover(function(){ 
    $('#more ul').show(); 
}, function(){ 
    $('#more ul').hide(); 
}); 

$('#more li').click(function() { 
    $('#more ul').append($('#main > li').eq(2)) 
    $('#more').before(this); 
});

}）

来源

2011-08-10 15:13:54 ShankarSangoli

如何使用jquery删除子元素

回答

相关问题