用另一個div的內容替換div

Question

我需要創建一個click事件，它用鏈接中包含的div（.clickContent）的內容替換特定div（#main_view）的內容。下面的代碼：

<div id="main_view">Main View Target</div> 

<ul class="webbies"> 
<li data-id="ab"> 
<a href="#"><img src="content/images/webby-andy-clarke.png" width="110" height="110" alt="" /></a> 
<div class="clickContent">This is the click content</div> 
</li> 
</ul> 


<script type="text/javascript"> 
$("ul.webbies li a").click(function() { 
var content = $(this).html($('.clickContent').html()); 
$("#main_view").replace(content); 
return false;  
}); 
</script> 

我似乎無法弄清楚如何針對.clickContent div的內容，然後更換main_view股利。

在此先感謝您的幫助。

Answer 1

這是很簡單的比你想象的：

$("ul.webbies li a").click(function(e) { 
    e.preventDefault(); 
    $("#main_view").html($('.clickContent').html()); 
}); 

現在，你可能有，如果你有不只是一個.clickContent格多以調整選擇。

E.g.這將選擇點擊鏈接的下一個兄弟：

$("ul.webbies li a").click(function(e) { 
    e.preventDefault(); 
    var content = $(this).next('.clickContent').html(); 
    if(content) $("#main_view").html(content); 
}); 

另外需要注意的是，如果複製的內容包含了ID的元素，你可能會破壞JavaScript的，因爲你用相同的ID，然後在多個元素。

Answer 2

你也可以使用的.text，而不是html的，如果你想逃避的HTML標記