1. дома
  2. Вопрос и ответ
  3. jquery selector извлекает дочерние элементы и добавляет к другому элементу

jquery selector извлекает дочерние элементы и добавляет к другому элементу

2016-04-04 3 views
3

Селектор дочерних Jquery выбирает элемент img, а затем извлекает и удаляет элемент и добавляет его в другой элемент div ..... почему это происходит так? Не должна ли это быть копией добавляемого элемента?jquery selector извлекает дочерние элементы и добавляет к другому элементу

var $anchors = $("#imageGallery a"); 
 
var $overlay = $('<div id="overlay"></div>'); 
 
$("body").append($overlay); 
 
$anchors.click(function(event){ 
 
\t event.preventDefault(); 
 
\t $overlay.show(); 
 
\t var a = $(this).children(); 
 
\t $overlay.append(a); 
 
}); 
 

 
$overlay.click(function(){ 
 
\t $(this).hide(); 
 
});
body { 
 
\t font-family: sans-serif; 
 
\t background: #384047; 
 
} 
 
h1 { 
 
\t color: #fff; 
 
\t text-align: center 
 
} 
 

 
ul { 
 
\t list-style:none; 
 
\t margin: 0 auto; 
 
\t padding: 0; 
 
\t display: block; 
 
\t max-width: 780px; 
 
\t text-align: center; 
 
} 
 
ul li { 
 
\t display: inline-block; 
 
\t padding: 8px; 
 
\t background:white; 
 
\t margin:10px; 
 
} 
 
ul li img { 
 
\t display: block; 
 
} 
 
a { 
 
\t text-decoration: none; 
 
} 
 

 
#overlay{ 
 
\t width: 100%; 
 
\t height: 100%; 
 
\t position: fixed; 
 
\t top: 0; 
 
\t left:0; 
 
\t background: rgba(0,0,0,0.7); 
 
\t display: none; 
 
}
<body> 
 
\t <h1>Image Gallery</h1> 
 
\t <ul id="imageGallery"> 
 
\t \t <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> 
 
\t </ul> 
 
\t <script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script> 
 
\t <script src="js/app.js" type="text/javascript" charset="utf-8"></script>

источник

2016-04-04 Dhruv Raj

+0

Как это работает, базовый собственный метод appendChild делает то же самое -> * «Если данный ребенок является ссылкой на существующий узел в документе,' appendChild() 'перемещает его из своего текущее положение на новую позицию "* – adeneo

ответ

0

clone() является функция использование для копирования любого объекта и поместить его где-то DOM. Это копирование и вставка может быть более приятным с appendTo, prependTo, до и после функции.

append() добавляет объект внутри выбранного elements.Lets пойти на основной, добавить элемент в качестве последнего ребенка из выбранных элементов, но вы действительно знаете, что вы можете переместить или переместить один объект в 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){ 
 
\t event.preventDefault(); 
 
\t $overlay.show(); 
 
\t var a = $(this).children().clone(); 
 
\t $overlay.empty().append(a); 
 
}); 
 

 
$overlay.click(function(){ 
 
\t $(this).hide(); 
 
});
body { 
 
\t font-family: sans-serif; 
 
\t background: #384047; 
 
} 
 
h1 { 
 
\t color: #fff; 
 
\t text-align: center 
 
} 
 

 
ul { 
 
\t list-style:none; 
 
\t margin: 0 auto; 
 
\t padding: 0; 
 
\t display: block; 
 
\t max-width: 780px; 
 
\t text-align: center; 
 
} 
 
ul li { 
 
\t display: inline-block; 
 
\t padding: 8px; 
 
\t background:white; 
 
\t margin:10px; 
 
} 
 
ul li img { 
 
\t display: block; 
 
} 
 
a { 
 
\t text-decoration: none; 
 
} 
 

 
#overlay{ 
 
\t width: 100%; 
 
\t height: 100%; 
 
\t position: fixed; 
 
\t top: 0; 
 
\t left:0; 
 
\t background: rgba(0,0,0,0.7); 
 
\t display: none; 
 
}
<body> 
 
\t <h1>Image Gallery</h1> 
 
\t <ul id="imageGallery"> 
 
\t \t <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> 
 
\t </ul> 
 
\t <script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script> 
 
\t <script src="js/app.js" type="text/javascript" charset="utf-8"></script>

источник

2016-04-04 11:36:41

0

Нет, добавлять просто перемещать данные элементы (если передать объект JQuery или Dóm опорный элемент к нему). Вы можете клонировать элемент и передавать их в 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>

источник

2016-04-04 11:35:49

0 

var $anchors = $("#imageGallery a"); 
 
var $overlay = $('<div id="overlay"></div>'); 
 

 
$("body").append($overlay); 
 

 
$anchors.each(function(){ 
 
$(this).click(function(event){ 
 
\t event.preventDefault(); 
 
\t $overlay.show(); 
 
\t var a = $(this).children('img').clone(); 
 
\t $('#overlay').html(a); 
 
}); 
 
    }); 
 

 
$overlay.click(function(){ 
 
\t $(this).hide(); 
 
});
body { 
 
\t font-family: sans-serif; 
 
\t background: #384047; 
 
} 
 
h1 { 
 
\t color: #fff; 
 
\t text-align: center 
 
} 
 

 
ul { 
 
\t list-style:none; 
 
\t margin: 0 auto; 
 
\t padding: 0; 
 
\t display: block; 
 
\t max-width: 780px; 
 
\t text-align: center; 
 
} 
 
ul li { 
 
\t display: inline-block; 
 
\t padding: 8px; 
 
\t background:white; 
 
\t margin:10px; 
 
} 
 
ul li img { 
 
\t display: block; 
 
} 
 
a { 
 
\t text-decoration: none; 
 
} 
 

 
#overlay{ 
 
\t width: 100%; 
 
\t height: 100%; 
 
\t position: fixed; 
 
\t top: 0; 
 
\t left:0; 
 
\t background: rgba(0,0,0,0.7); 
 
\t display: none; 
 
}
<body> 
 
\t <h1>Image Gallery</h1> 
 
\t <ul id="imageGallery"> 
 
\t \t <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> 
 
\t </ul> 
 
\t <script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script> 
 
\t <script src="js/app.js" type="text/javascript" charset="utf-8"></script>

источник

2016-04-04 11:38:51 Pedram

+0

Я думаю, что вы что-то забыли. Это не работает –

+0

Да @ RinoRaj, исправлено. благодаря – Pedram

Смежные вопросы

 Смежные вопросы