用另一个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标记