2009-10-28 93 views
0

我试图用创建的元素来替代一个div,从去:创建jQuery中嵌套元素

<div id='links'></div> 

<div id='links'> 
<ul> 
<li><a href='#'>No</a></li> 
</li> 
</div> 

我想要的功能附加到链接的<a>我创建的元素。创建所需的链接工作,但使用的包装功能包装在<li>元素的链接和一个<ul>元素是不工作:

var no = $('<a>').attr({ 
    href: '#' 
    }).click(function() { 
    alert('clicked no'); 
    return false; 
    }).text('no'); 

工作,但仍然no.wrap('<li></li>');只是给我一个展开<a>元素。 我也试过$('#links').append('<ul>').append('<li>').append(no),但那也行不通。

有没有更好的方法来做到这一点?

回答

1

no.wrap('<li></li>')仍然会返回<a>元素,但它会在其周围添加<li>元素。所以你可以做no.wrap('<li></li>').parent()来包装它并返回<li>元素。

1
<script type="text/javascript"> 
$(function(){ 

    var list = $("<ul />"); 

    var no = $('<a />') 
     .attr({ href: '#' }) 
     .click(function() { 
      alert('clicked no'); 
      return false; 
     }) 
     .text('no') 
     .wrap("<li />") 
      .parent() 
      .appendTo(list); 

    list.appendTo("#links"); 
});  
</script> 
0

使用jQuery实际上可以将所有东西都嵌入到包装中,特别是如果您不需要自己处理各个项目。

您还可以创建新的元素以实时嵌套。不需要创建一堆临时变量来保存它们。

多个项目可以通过简单地将它们作为单独的参数传递给append()来同时添加。