如何使用jQuery.load更換一個div包括股利

Question

我有一個的「secondHeader」 id的DIV，我想用「secondHeader」的相同ID的另一個div來替換整個格但不是替換它，它只是加載第一個加載的div。

$("#secondHeader").load("/logged-in-content.html #secondHeader"); 

這是什麼情況？

<div id="secondHeader"><div id="secondHeader"></div></div> 

我希望發生的就是從阿賈克斯負載secondHeader div來完全取代secondHeader在初始頁面。

我知道這聽起來很愚蠢，但在這裏就是我試圖完成......當用戶沒有登錄，他們看到一個非登錄的頭。我使用ajax來允許該用戶登錄該網站，並且我想通過ajax將未登錄的標題替換爲已登錄的標題。

我都試過，我知道等應有盡有......

$("#secondHeader").replaceWith($("#secondHeader").load("/logged-in-content.html #secondHeader")); 

...和手之前，使用一個.remove（）...

任何想法？

Answer 1

我認爲最好的方法是使用get而不是load。你的情況，你可以這樣做：

$.get("/logged-in-content.html #secondHeader", function(data) { 
    $("#secondHeader").replaceWith(data); 
}); 

[編輯：刪除一個括號]

更新： 如果/logged-in-content.html已經不僅僅是你需要的代碼，您可在將返回的數據封裝在另一個jQuery對象中，並使用.find（）來提取容器。 試試這個：

$（ 「＃secondHeader」）replaceWith（$（數據）。找到（ 「＃secondHeader」））;

Answer 2

你可以在load（）方法中精煉你的選擇器嗎？

例如，

$("#secondHeader").load("/logged-in-content.html #secondHeader > *"); 

這樣，你不抓住DIV本身，你抓住它的內容。

Answer 3

$ .load並不是真正的最佳選擇，因爲該函數只是用來填充div的內容，正如您所看到的。您可以直接使用$.get，並設置回調函數來替換原始div，或更改logged-in-content.html以排除div。

也知道，作爲一個基於JavaScript的解決方案，如果用戶查看源代碼，他們會看到，他們可以得到訪問由剛剛在他們的地址欄中鍵入它登錄-content.html如果您其他方面沒有保護它。

Answer 4

在插入它之前，您想要用div封裝。

​​

Answer 5

你可以在你的「secondHeader」div上添加一個容器DIV嗎？那麼你會使用：

$('#secondHeaderContainer').load('/logged-in-content.html #secondHeader'); 

Answer 6

爲我工作最好的另一種方式：

$('#div_to_replace').load('/ajax/loader', function() { 
    $(this).children(':first').unwrap(); 
}); 

Answer 7

最終的答案：

$.fn.loadWith = function(u){var c=$(this);$.get(u,function(d){c.replaceWith(d);});}; 
$("#test").loadWith("somelink.html"); 

jQuery的load元素添加到選擇的元素的響應。 jQuery的replaceWith替換選定的元素。

<div id="curElement">start</div> 

$("#curElement").load("somelink.html"); 
will result in: 
<div id="curElement">What ever was in somelink.html</div> 


$("#curElement").replaceWith("somelink.html"); 
will result in: 
What ever was in somelink.html 

我建議加入到jQuery的一個函數，做兩件事：

$.fn.loadWith = function(u){ 
    var c=$(this); 
    $.get(u,function(d){ 
     c.replaceWith(d); 
    }); 
}; 
$("#test").loadWith("somelink.html"); 

Answer 8

我一直有這樣定義的jQuery函數：

jQuery.fn.loadOuter = function(url, callback) 
    { 
     var toLoad = $(this); 
     $.get(url, function(data) { 
      toLoad.replaceWith(data); 
      if (callback != null && callback != undefined) 
       callback(); 
     }); 
    } 

那麼我可以說

$(...).load(url) 

或

$(...).loadOuter(url) 

第二個是做你想做的。我也有一個名爲loadInner的函數，它只是調用load來表示它的價值。

Answer 9

var target = '#secondHeader'; 
var pathname = '/logged-in-content.html'; 
var source = pathname + ' ' + target; 
var temp = jQuery('<div></div>'); 
temp.load(source, function() { 
jQuery(target).replaceWith(temp.contents()); 
}); 

或功能

$.fn.replaceWithRemote = function(source, callback) { 
    var target = $(this); 
    var temp = $('<div></div>'); 
    temp.load(source, function() { 
     target.replaceWith(temp.contents()); 
     if (callback != null){ 
      callback(); 
     } 
    }); 
} 

$('#secondHeader').replaceWithRemote('/logged-in-content.html #secondHeader'); 

Answer 10

已加載的內容後，發現其子#second和解開它。

$("#secondHeader").children().unwrap(); 

Answer 11

我有這個問題爲好，但我可以重新編寫代碼，像這樣使用.load：（玉）

div#view 
    div.content 
     block content 

和像這樣的腳本...

$("#view").load($(this).attr("href") + " div.content") 

所以定位孩子而不是相同的標籤。

Answer 12

使用$獲得（）爲我工作，但我不得不從響應文件先解壓容器：

$.get("/page.html", function (data) { 
    var elem = $(data).find('#container'); 
    $("#puthere").replaceWith(elem); 
});