如何将带有对象的元素作为其中的内容进行追加？
如何将带有对象的元素作为其中的内容进行追加？
提问于 2018-08-13 06:25:44
我有一个简单的HTML结构：
<div class="bg">
<video muted loop autoplay>
<source type="video/mp4" src="video/filename.mp4"></source>
</video>
</div>
<div class="bg">
<video muted loop autoplay>
<source type="video/mp4" src="video/filename.mp4"></source>
</video>
</div>我想通过jQuery将一个<div class="cover"></div>元素附加到每个视频元素，每个元素的内容都是视频元素。
为此，我做到了：
$('#full_slider').find('.bg').each(function() {
var video = $(this).find('video');
$(this).append('<div class="cover" /><div class="cover" /><div class="cover" />');
$(this).find('.cover').html(video);
});上面的代码(奇怪地)删除了最初的视频，我忍受着：
<div class="bg">
<div class="cover">
<video muted="" loop="" autoplay="">
<source type="video/mp4" src="video/eroi.mp4">
</video>
</div>
<div class="cover">
<video muted="" loop="" autoplay="">
<source type="video/mp4" src="video/eroi.mp4">
</video>
</div>
<div class="cover">
<video muted="" loop="" autoplay="">
<source type="video/mp4" src="video/eroi.mp4">
</video>
</div>
</div>所需(预期)输出为：
<div class="bg">
<video muted loop autoplay>
<source type="video/mp4" src="video/filename.mp4"></source>
</video>
<div class="cover">
<video muted="" loop="" autoplay="">
<source type="video/mp4" src="video/eroi.mp4">
</video>
</div>
<div class="cover">
<video muted="" loop="" autoplay="">
<source type="video/mp4" src="video/eroi.mp4">
</video>
</div>
<div class="cover">
<video muted="" loop="" autoplay="">
<source type="video/mp4" src="video/eroi.mp4">
</video>
</div>
</div>我的错误在哪里？
回答 4
Stack Overflow用户
回答已采纳
发布于 2018-08-13 07:09:02
你能看看这是不是你想要的？我们的想法是对clone()元素执行moved操作，因为它只是对cover的内容执行moved操作
$(document).ready(function() {
$('#full_slider').find('.bg').each(function() {
var video = $(this).find('video').clone();
$(this).append('<div class="cover" /><div class="cover" /><div class="cover" />');
$(this).find('.cover').html(video);
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="full_slider">
<div class="bg">
<video muted loop autoplay>
<source type="video/mp4" src="https://www.sample-videos.com/video/mp4/240/big_buck_bunny_240p_1mb.mp4"></source>
</video>
</div>
<div class="bg">
<video muted loop autoplay>
<source type="video/mp4" src="https://www.sample-videos.com/video/mp4/240/big_buck_bunny_240p_1mb.mp4"></source>
</video>
</div>
</div>
Stack Overflow用户
发布于 2018-08-13 06:46:00
问题出在$(this).append('<div class="cover" /><div class="cover" /><div class="cover" />');中您的html不正确，请尝试将其更改为$(this).append('<div class="cover"></div>');并添加$(this).html("");以在添加内容之前将其清除
$(".doit").on('click', function() {
$('#full_slider').find('.bg').each(function() {
var video = $(this).find('video');
$(this).html("");
$(this).append('<div class="cover"></div>');
$(this).find('.cover').html(video);
$(this).find('video').trigger('play');
});
});button {
position: absolute;
top:0;
right:0;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="full_slider">
<div class="bg">
<video muted loop autoplay>
<source type="video/mp4" src="https://www.w3schools.com/html/mov_bbb.mp4"></source>
</video>
</div>
<div class="bg">
<video muted loop autoplay>
<source type="video/mp4" src="https://www.w3schools.com/html/mov_bbb.mp4"></source>
</video>
</div>
</div>
<button class="doit">Do it</button>
Stack Overflow用户
发布于 2018-08-13 06:46:28
从表面上看。这就是你想要的
$('#full_slider > .bg').append("<div class='cover'/>");
$('#full_slider > .bg > .cover').html(video);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51813342
复制相关文章
相似问题