Question

我有这个简单的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="bg"></div>后面附加一个<div class="cover"></div>元素，每个元素都以video元素为内容。

为此，我做了：

$('#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>

我的错误在哪里？

Answer 1

可以看到这是否是您想要的吗？想法是clone()视频元素，因为发生的事情只是moved到cover

的内容

$(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>

Answer 2

问题出在$(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>

Answer 3

从外观上看。这就是你的后遗症

$('#full_slider > .bg').append("<div class='cover'/>");
$('#full_slider > .bg > .cover').html(video);

Answer 4

如果要将视频添加到现有的HTML代码中，最好的方法可能不是使用jQuery动态添加视频。 jQuery应该主要用于格式化AFAIK .....最简单的方法可能是使用编辑器来查找和替换。我认为这可以节省您的开销.....

如何在元素中附加对象作为内容？

4 个答案: