Jquery children选择器选择img元素，然后提取并删除元素并将其附加到另一个div元素.....为什么会这样？它不应该是要附加的元素的副本吗？
var $anchors = $("#imageGallery a");
var $overlay = $('<div id="overlay"></div>');
$("body").append($overlay);
$anchors.click(function(event){
event.preventDefault();
$overlay.show();
var a = $(this).children();
$overlay.append(a);
});
$overlay.click(function(){
$(this).hide();
});body {
font-family: sans-serif;
background: #384047;
}
h1 {
color: #fff;
text-align: center
}
ul {
list-style:none;
margin: 0 auto;
padding: 0;
display: block;
max-width: 780px;
text-align: center;
}
ul li {
display: inline-block;
padding: 8px;
background:white;
margin:10px;
}
ul li img {
display: block;
}
a {
text-decoration: none;
}
#overlay{
width: 100%;
height: 100%;
position: fixed;
top: 0;
left:0;
background: rgba(0,0,0,0.7);
display: none;
}<body>
<h1>Image Gallery</h1>
<ul id="imageGallery">
<li><a href="images/1.png"><img src="images/1.png"></a></li>
<li><a href="images/2.png"><img src="images/2.png"></a></li>
<li><a href="images/3.png"><img src="images/3.png"></a></li>
<li><a href="images/4.png"><img src="images/4.png"></a></li>
<li><a href="images/5.png"><img src="images/5.png"></a></li>
<li><a href="images/6.png"><img src="images/6.png"></a></li>
<li><a href="images/7.png"><img src="images/7.png"></a></li>
</ul>
<script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/app.js" type="text/javascript" charset="utf-8"></script>
答案 0 :(得分：0)
不，append只会移动给定的元素（如果你传递一个jQuery对象或dom元素引用）。您可以克隆元素并将其传递给append()
var $anchors = $("#imageGallery a");
var $overlay = $('<div id="overlay"></div>');
$("body").append($overlay);
$anchors.click(function(event) {
event.preventDefault();
$overlay.show();
var a = $(this).children().clone();
$overlay.html(a);
});
$overlay.click(function() {
$(this).hide();
});body {
font-family: sans-serif;
background: #384047;
}
h1 {
color: #fff;
text-align: center
}
ul {
list-style: none;
margin: 0 auto;
padding: 0;
display: block;
max-width: 780px;
text-align: center;
}
ul li {
display: inline-block;
padding: 8px;
background: white;
margin: 10px;
}
ul li img {
display: block;
}
a {
text-decoration: none;
}
#overlay {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.7);
display: none;
}<body>
<h1>Image Gallery</h1>
<ul id="imageGallery">
<li>
<a href="//placehold.it/64?text=1">
<img src="//placehold.it/64?text=1">
</a>
</li>
<li>
<a href="//placehold.it/64?text=2">
<img src="//placehold.it/64?text=2">
</a>
</li>
<li>
<a href="//placehold.it/64?text=3">
<img src="//placehold.it/64?text=3">
</a>
</li>
<li>
<a href="//placehold.it/64?text=4">
<img src="//placehold.it/64?text=4">
</a>
</li>
</ul>
<script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/app.js" type="text/javascript" charset="utf-8"></script>
答案 1 :(得分：0)
clone()是用于复制任何对象的函数，并将其放在某处是DOM。使用appendTo，prependTo，函数之前和之后的复制和粘贴可能会更酷。
append() 在所选元素中添加对象。让我们选择基本元素，添加元素作为所选元素的最后一个子元素，但是你真的知道你可以移位或者使用此函数在DOM中移动一个对象。
所做的更改
var a = $(this).children().clone();
$overlay.empty().append(a);
工作示例
var $anchors = $("#imageGallery a");
var $overlay = $('<div id="overlay"></div>');
$("body").append($overlay);
$anchors.click(function(event){
event.preventDefault();
$overlay.show();
var a = $(this).children().clone();
$overlay.empty().append(a);
});
$overlay.click(function(){
$(this).hide();
});body {
font-family: sans-serif;
background: #384047;
}
h1 {
color: #fff;
text-align: center
}
ul {
list-style:none;
margin: 0 auto;
padding: 0;
display: block;
max-width: 780px;
text-align: center;
}
ul li {
display: inline-block;
padding: 8px;
background:white;
margin:10px;
}
ul li img {
display: block;
}
a {
text-decoration: none;
}
#overlay{
width: 100%;
height: 100%;
position: fixed;
top: 0;
left:0;
background: rgba(0,0,0,0.7);
display: none;
}<body>
<h1>Image Gallery</h1>
<ul id="imageGallery">
<li><a href="images/1.png"><img src="images/1.png"></a></li>
<li><a href="images/2.png"><img src="images/2.png"></a></li>
<li><a href="images/3.png"><img src="images/3.png"></a></li>
<li><a href="images/4.png"><img src="images/4.png"></a></li>
<li><a href="images/5.png"><img src="images/5.png"></a></li>
<li><a href="images/6.png"><img src="images/6.png"></a></li>
<li><a href="images/7.png"><img src="images/7.png"></a></li>
</ul>
<script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/app.js" type="text/javascript" charset="utf-8"></script>
答案 2 :(得分：0)
var $anchors = $("#imageGallery a");
var $overlay = $('<div id="overlay"></div>');
$("body").append($overlay);
$anchors.each(function(){
$(this).click(function(event){
event.preventDefault();
$overlay.show();
var a = $(this).children('img').clone();
$('#overlay').html(a);
});
});
$overlay.click(function(){
$(this).hide();
});body {
font-family: sans-serif;
background: #384047;
}
h1 {
color: #fff;
text-align: center
}
ul {
list-style:none;
margin: 0 auto;
padding: 0;
display: block;
max-width: 780px;
text-align: center;
}
ul li {
display: inline-block;
padding: 8px;
background:white;
margin:10px;
}
ul li img {
display: block;
}
a {
text-decoration: none;
}
#overlay{
width: 100%;
height: 100%;
position: fixed;
top: 0;
left:0;
background: rgba(0,0,0,0.7);
display: none;
}<body>
<h1>Image Gallery</h1>
<ul id="imageGallery">
<li><a href="images/1.png"><img src="images/1.png"></a></li>
<li><a href="images/2.png"><img src="images/2.png"></a></li>
<li><a href="images/3.png"><img src="images/3.png"></a></li>
<li><a href="images/4.png"><img src="images/4.png"></a></li>
<li><a href="images/5.png"><img src="images/5.png"></a></li>
<li><a href="images/6.png"><img src="images/6.png"></a></li>
<li><a href="images/7.png"><img src="images/7.png"></a></li>
</ul>
<script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/app.js" type="text/javascript" charset="utf-8"></script>