如何让.load()在.each()循环中工作

Question

我正在修改这个问题中的一些代码。我现在正试图让它为一个视频的多个实例工作。这是我能让它工作的唯一方法，但我想让它为每一个实例工作，即有一个视频在每一页上都会发生变化。

$( function() {
const bgv = $('.bgvid');
$('source', bgv).each(function() {
const el = $(this);
el.attr('src', el.data('src'));
});
bgv[0].load();
bgv[1].load();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<video class="bgvid" playsinline="playsinline" loop="loop" autoplay="autoplay" muted="muted" preload="none">
<source type="video/mp4" data-src="https://archive.org/download/UNIVAC-AD-2/UNIVAC2_512kb.mp4">
</video>
<video class="bgvid" playsinline="playsinline" loop="loop" autoplay="autoplay" muted="muted" preload="none">
<source type="video/mp4" data-src="https://archive.org/download/UNIVAC-AD-2/UNIVAC2_512kb.mp4">
</video>

我试着把它放在这样的循环中，而不是bgv[0].load((；但它没有起作用：

$('.bgvid').each(function(){ 
$(this).load();
});

Answer 1

只需调用this.load()，不要将DOM元素转换为jQuery元素。

$( function() {
const bgv = $('.bgvid');
$('source', bgv).each(function() {
const el = $(this);
el.attr('src', el.data('src'));
});
bgv.each(function() {
this.load();
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<video class="bgvid" playsinline="playsinline" loop="loop" autoplay="autoplay" muted="muted" preload="none">
<source type="video/mp4" data-src="https://archive.org/download/UNIVAC-AD-2/UNIVAC2_512kb.mp4">
</video>
<video class="bgvid" playsinline="playsinline" loop="loop" autoplay="autoplay" muted="muted" preload="none">
<source type="video/mp4" data-src="https://archive.org/download/UNIVAC-AD-2/UNIVAC2_512kb.mp4">
</video>