如果使用append（）插入新的DOM節點，是否可以將鏈上下文移動到新元素？從最新追加（）調用中獲取元素

此示例代碼說明了主題：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
         "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head><title></title> 
<script type="text/javascript" 
     src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> 
</script> 
<script type="text/javascript"><!-- 
$(function(){ 
    $("<div></div>") 
     .appendTo("body") 
     .append("<span>Click me</span>") 
     .click(function(){ 
      alert("Clicked on <" + this.tagName + ">, <SPAN> expected"); 
     }); 
}); 
//--></script> 
</head> 
<body> 

</body> 
</html>

此代碼attachs一個onclick處理程序的<div>，但我想它在新的<span>。

編輯：澄清

我想我在想直接函數，如add()或andSelf()不打破鏈流了這麼多<:-)

編輯：解彙總

對於記錄：似乎沒有原生findAppended()功能。這些都是一些備選方案：

阿爾特製作流程：

$("<span>Click me</span>") 
    .appendTo("body") 
    .wrap("<div></div>") 
    .click(function(){ 
     alert("Clicked on <" + this.tagName + ">, <SPAN> expected"); 
    });

存儲在一個變量的新元素：

var span = $("<span>Click me</span>") 
    .click(function(){ 
     alert("Clicked on <" + this.tagName + ">, <SPAN> expected"); 
    }); 
$("<div></div>") 
    .appendTo("body") 
    .append(span);

開始一個新的子鏈：

$("<div></div>") 
    .appendTo("body") 
    .append(
     $("<span>Click me</span>") 
     .click(function(){ 
      alert("Clicked on <" + this.tagName + ">, <SPAN> expected"); 
     }) 
    );

找到新的元素創建後：

$("<div></div>") 
    .appendTo("body") 
    .append("<span>Click me</span>") 
    .find("span:last") 
    .click(function(){ 
     alert("Clicked on <" + this.tagName + ">, <SPAN> expected"); 
    }) 
    .end(); // Not necessary here, used to illustrate how to continue the chain

注：代碼沒有測試。

來源

2010-07-07 Álvaro González

哈哈，看你做了什麼 - 你已經暴露了5種萬億方式做同樣的事情在jQuery的，哈哈哈哈 – 2010-07-07 08:15:43

@丹赫伯登：你是對的:) – 2010-07-07 08:23:55

做了一些編輯我的答案re：你的說明 – 2010-07-07 18:41:48

可能會更好地打破這一點，但你需要從元素開始或找到它。所以，你既可以：

$("<div></div>") 
     .appendTo("body") 
     .append("<span>Click me</span>") 
     .find('span') 
     .click(function(){ 
      alert("Clicked on <" + this.tagName + ">, <SPAN> expected"); 
     });

或

$('<span>Click me</span>') 
    .appendTo("body") 
    .wrap('<div />') 
    .click(function(){ 
       alert("Clicked on <" + this.tagName + ">, <SPAN> expected"); 
      });

find和wrap

編輯：關於OP編輯

記住.add()（http://api.jquery.com/add/）已經存在，做什麼名字暗示。此外，像

var $span = $('<span>click me</span>').click( 
       function() { 
        alert("Clicked on <" + this.tagName + ">, <SPAN> expected"); 
       }); 
$('<div></div>').append($span).appendTo('body');

將最終使你的代碼更易於管理和易讀

的jQuery已經有了分類的方法來過濾和遍歷DOM。在您使用DOM的情況下，您可以輕鬆使用.find('span')來獲取元素 - 或.children('span') - 在這裏使用好的選擇器和整體網站架構非常重要。

此外，.end()功能是非常糟糕的屁股：

$('ul').append('<li>test</li><li>test2</li>') // add two li elements 
    .children().eq(0).css('background-color', '#ff0000') // change the background of the first child 
    .end().css('margin-left', '20px'); //revert to the original data-set (the ul) and change its margin

來源

2010-07-07 08:13:25

add（）改變了匹配元素的集合，而不是DOM，所以我仍然需要使用任何其他方法（改變創建流程，變量中的存儲元素，開始新的子鏈或查找元素創建後）。無論如何，我接受這個答案，因爲它似乎沒有本地功能存在，你提供了一個很好的監督的替代品。 – 2010-07-08 06:56:07

這是可以做到，通過重新設計對象創建流了一點。因此，創建span，配置它，處理點擊，然後將其附加到主體。這是可能的，這要歸功於jquery的流暢接口。

$(function(){ 
$("<div></div>") 
    .appendTo("body") 
    .append(
    $("<span/>") 
     .text("Click me") 
     .click(function(){ 
      alert("Clicked on <" + this.tagName + ">, <SPAN> expected"); 
     })); 
});

來源

2010-07-07 08:13:48

$(function(){ 
    $("<div></div>") 
     .appendTo("body") 
     .append($("<span>Click me</span>").click(function(){ 
      alert("Clicked on <" + this.tagName + ">, <SPAN> expected"); 
     }));   
});

來源

2010-07-07 08:14:11 jAndy

從最新追加（）調用中獲取元素

編輯：澄清

編輯：解彙總

回答

相關問題