使用$。替換HTML中的一個div

我正在運行jQuery ajax方法，並在succcess（.done）我想加載一些HTML，以便用戶獲得他們的個人資料上的一些更新的數字。

我試圖取代看起來像這樣的HTML，

<div id="large_buttons"><a href="">Button</a><a href="">Button 2</a></div>

爲了這個我做以下，

$("#large_buttons").load(site_url+"my_profile #large_buttons");

然而，這只是創建下列HTML，

<div id="large_buttons"><div id="large_buttons"><a href="">Button</a><a href="">Button 2</a></div></div>

我想要加載我的新HTML完全覆蓋現有的#large_buttons div

是這個possibe？

2012-03-16 Udders

你可以發佈你有什麼，你想實現什麼？ – kgr 2012-03-16 23:33:54

這正是我有什麼，我想要實現的，我想從另一個URL加載#large_buttons並覆蓋現有的#large_buttons – Udders 2012-03-16 23:35:25

好吧，對不起，我誤解了你的問題，這不是很清楚... – kgr 2012-03-16 23:36:25

.load() method（正如您所見）直接將響應加載到指定的元素中，因此一種解決方案是將您的服務器端代碼更改爲僅輸出沒有#large_buttons div本身的內容。

另一個解決辦法是使用其他Ajax methods之一，例如，.get() method，並準確地把返回的HTML，你想從成功處理程序中：

$.get(site_url+"my_profile", function(data) { 
    $("#large_buttons").replaceWith(data); 
},'html');

（理論上你做」 t需要最後一個參數來表示數據類型，因爲jQuery做了一個「智能猜測」，但是明確地告訴它你期待的是html）

確實聽起來像是它應該做的。

編輯：我剛剛注意到（正如喬恩指出的那樣），您正在使用的語法，其中包含選擇器，以便使用返回的HTML的哪一部分，因此您可以簡單地修改該選擇器以獲取元素在屬於#large_buttons格內響應：

$("#large_buttons").load(site_url+"my_profile #large_buttons > *");

應與其中的div只包含其他元素，而不是文本節點的樣本HTML工作。

2012-03-16 23:38:04 nnnnnn

AFAIK'$ .get'沒有響應'＃large_buttons'部分，所以這種方法也需要服務器端的修改。 – Jon 2012-03-16 23:43:49

謝謝@Jon，是的，我剛剛注意到了這一點。但根據我的編輯，這可能意味着對傳遞給'.load（）'的選擇器進行小小的調整將會做出訣竅，而不會做任何其他更改。 – nnnnnn 2012-03-16 23:50:31

+1，這也是一個有趣的方法（儘管我不喜歡用'.load'的過濾來坦白任何方法）。 – Jon 2012-03-17 00:00:55

如果我理解正確，您想用從服務器獲得的新版本替換div#large_buttons。 JQuery的replaceWith()方法應該可以做到。

2012-03-16 23:38:30 Carsten

如果你想改變的最少的現有代碼，那麼最簡單的將包裹#large_buttons另一個元素（其中，這將是一個唯一的孩子），並簡單地對一個使用.load內。

你不會需要做，如果你沒收.load，並與更多的基本功能了像$.get，例如：

$.get(large_buttons_url, function(data) { 
    $("#large_buttons").replaceWith(data); 
});

...但隨後就失去了自動過濾DOM是.load可以做（你不能再追加#large_buttons到URL），所以你必須確保AJAX請求只有返回你感興趣的HTML片段。

就個人而言，這是我會做的，因爲聽起來並不是很好，但是取出整個頁面並丟棄它的一部分;但是，這將需要您修改比替代選項更多的代碼。

2012-03-16 23:38:40 Jon

這是正確的答案。加載替換選定元素的*內容*。您可能需要在包裝div上使用加載，或者更改要加載的div的結構。 – 2012-03-16 23:44:23

使用AJAX您的任何股利加載一些內容，你可以使用jQuery load功能

$("#large_buttons").load("url_which_Returns_html.php",function(data){ 
    alert("Items loaded"); 
});

這將加載的內容（覆蓋現有內容）從PHP頁面返回到div id爲「large_buttons」

如果你想有一個purticular DIV之後加載數據，你可以這樣做

$.get("url_which_returns_html.php",function(data){ 
    ('#right').after(data); 
});

這將加載從PHP響應頁面後與ID爲「右」的分區

2012-03-16 23:40:57 Shyju

回答