jQuery巢追加

Question

是否可以在jQuery中嵌套附件？

我試着這樣做：

var div = $('#ui-container'); 
var div2 = div.append($('<div/>').addClass('second')); 
var div3 = div2.append($('<div/>').addClass('third')); 

我想這一點：

<div id='ui-container'> 
    <div class='second'> 
    <div class='third'></div> 
    </div> 
</div> 

但我得到這個：

<div id='ui-container'> 
    <div class='second'></div> 
    <div class='third'></div> 
</div> 

Answer 1

你必須要做得像下面，

var div = $('#ui-container'); 
var div2 = $('<div/>').addClass('second').appendTo(div); 
var div3 = div2.append($('<div/>').addClass('third')); 

使用.appendTo()。因爲.append()將返回調用append函數的對象。這就是爲什麼你在你的情況下看到這樣的結果。

Answer 2

嘗試：

var div = $('#ui-container'); 
var div2 = $('<div/>').addClass('second'); 
div2.append($('<div/>').addClass('third')); 
div.append(div2); 

Answer 3

jQuery方法通常返回，他們正在呼籲DOM節點。

因此

var div2 = div.append($('<div/>').addClass('second')); // returns $('#ui-container') 

這也是標準爲與諸如$div$參考DOM元素。

這裏是一個詳細的解決方案

// Grab container 
$div = $('#ui-container'); 
// Create first child 
var div2 = '<div class="second"></div>' 
// Append .second to #ui-container 
$div.append(div2); 

// Grab .second from the DOM 
var $div2 = $('.second'); 
// Create grandchild element 
var div3 = '<div class="third"></div>' 
// Append to .second 
$div2.append(div3) 

codepen

Answer 4

@Rajaprabhu Aravindasamy有正確的答案。我想我會深入一點，並添加一個jsfiddle。

使用appendTo()而不是append。以下是來自http://api.jquery.com/appendto/的報價

.append（）和.appendTo（）方法執行相同的任務。主要區別在於語法 - 特別是內容和目標的放置。使用.append（），該方法之前的選擇器表達式是插入內容的容器。另一方面，使用.appendTo（），內容在方法之前，或者作爲選擇器表達式，或者作爲即時創建的標記，並插入到目標容器中。

這裏的標記：

您的變量 div， div2和 div3的

var div = $('#ui-container'); 
var div2 = $('<div>div2<div/>').addClass('second').appendTo(div); 
var div3 = $('<div>div3<div/>').addClass('third').appendTo(div2); 

Answer 5

都是指同一個元素$('#ui-container')。最簡單的方法來了解你所做的事就是重命名你的變量，所以你可以看到發生了什麼：

/* What you did is this: */ 
 
var container = $('.result1'); 
 
var containerWithSecondAppended = container.append($('<div/>').addClass('second')); 
 
var containerWithThirdAppended = containerWithSecondAppended.append($('<div/>').addClass('third')); 
 

 
/* What you wanted to do is this: */ 
 
var div = $('.result2'); 
 
var div2 = $('<div/>').addClass('second'); 
 
var div3 = $('<div/>').addClass('third'); 
 
div.append(div2.append(div3));

div { 
 
\t padding: 10px; 
 
\t border: 1px solid black; 
 
} 
 
.result { 
 
\t margin: 10px; 
 
\t padding: 10px; 
 
} 
 
.second { 
 
\t background: none yellow; 
 
} 
 
.third { 
 
\t background: none green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="result result1"></div> 
 
<div class="result result2"></div>

同樣在Fiddle。

jQuery append method將返回一個jQuery元素，即附加（更改）的元素。