如何克隆 jQuery 对象及其子对象,在 IE11 中没有引用
How to clone a jQuery object and its children, without references in IE11
我正在尝试克隆 jQuery 对象及其子对象,但没有引用。我的理解是 clone()
应该可以做到这一点,但在 IE11 中,我第二次尝试将其中一个子对象附加到 div 周围的空白处时,该子对象不再存在。您可以使用 IE11 在我的代码段中单击 "click me" 两次来查看此内容。
我想我的问题可能是子引用被克隆了,所以空白 div 覆盖了它们,但这可能是错误的。到目前为止,clone()
最适合克隆父元素。我更喜欢使用 jQuery 而不是 getElementsByClassName
。我没有运气使用 $.extend(true, {}, $('.allItems'));
如有任何帮助,我将不胜感激!
window.$allItems = $('.carousel_item').clone();
$('.link').on('click', function(evt) {
evt.preventDefault();
$('.blue').html('').append('<div id="bills"></div>');
$('#bills').append($allItems[0]);
});
.blue {
background-color: #d0e4f2;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a href="#" class="link">clickme</a>
<div class="blue">
<div id="bills">
<div class='carousel_item'>
<img src='http://fillmurray.com/150/200'>
<div>
<span>Tomatoes</span>
</div>
</div>
<div class='carousel_item'>
<img src='http://fillmurray.com/200/200'>
<div>
<span>Film</span>
</div>
</div>
</div>
</div>
解决了这个问题。
为了在添加空白 div 后多次添加轮播项目,我需要在每次调用函数时克隆 DOM 元素。我需要在点击监听器中添加一行:
$allItems = $allItems.clone();
我正在尝试克隆 jQuery 对象及其子对象,但没有引用。我的理解是 clone()
应该可以做到这一点,但在 IE11 中,我第二次尝试将其中一个子对象附加到 div 周围的空白处时,该子对象不再存在。您可以使用 IE11 在我的代码段中单击 "click me" 两次来查看此内容。
我想我的问题可能是子引用被克隆了,所以空白 div 覆盖了它们,但这可能是错误的。到目前为止,clone()
最适合克隆父元素。我更喜欢使用 jQuery 而不是 getElementsByClassName
。我没有运气使用 $.extend(true, {}, $('.allItems'));
如有任何帮助,我将不胜感激!
window.$allItems = $('.carousel_item').clone();
$('.link').on('click', function(evt) {
evt.preventDefault();
$('.blue').html('').append('<div id="bills"></div>');
$('#bills').append($allItems[0]);
});
.blue {
background-color: #d0e4f2;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a href="#" class="link">clickme</a>
<div class="blue">
<div id="bills">
<div class='carousel_item'>
<img src='http://fillmurray.com/150/200'>
<div>
<span>Tomatoes</span>
</div>
</div>
<div class='carousel_item'>
<img src='http://fillmurray.com/200/200'>
<div>
<span>Film</span>
</div>
</div>
</div>
</div>
解决了这个问题。
为了在添加空白 div 后多次添加轮播项目,我需要在每次调用函数时克隆 DOM 元素。我需要在点击监听器中添加一行:
$allItems = $allItems.clone();