jquery選擇器提取子元素並附加到另一個元素
[英]jquery selector extracts child and appends to another element
問題描述
Jquery子選擇器選擇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>
3 個解決方案
解決方案1
0 2016-04-04 11:35:49
不，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>
解決方案2
0 已采納 2016-04-04 11:36:41
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>
解決方案3
0 2016-04-04 11:38:51
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>
如何使用'this'的子元素作為jQuery中的選擇器？
[英]How do I use the child element of 'this' as a selector in jQuery?
如何使用Jquery和類選擇器獲取元素的第一個子文本？
[英]How to Get A Element First Child Text Using Jquery And Class Selector?
當選擇器元素被另一個元素遮蓋時，使用jQuery .on（）
[英]Using jQuery .on() when selector element is obscured by another element
jQuery：.load（）方法替換目標選擇器內容或追加到它？
[英]jQuery: .load() method replaces target selector content or appends to it?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.