創建jQuery中嵌套元素

Question

我試圖用創建的元素來替代一個div，從去：

<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)，但那也行不通。

有沒有更好的方法來做到這一點？

Answer 1

no.wrap('<li></li>')仍然會返回<a>元素，但它會在其周圍添加<li>元素。所以你可以做no.wrap('<li></li>').parent()來包裝它並返回<li>元素。

Answer 2

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

Answer 3

使用jQuery實際上可以將所有東西都嵌入到包裝中，特別是如果您不需要自己處理各個項目。

您還可以創建新的元素以實時嵌套。不需要創建一堆臨時變量來保存它們。

多個項目可以通過簡單地將它們作爲單獨的參數傳遞給append（）來同時添加。