javascript - 自动为博客中的每个视频添加 html 代码

Question

我的博客中有很多视频，其中包含这个经典代码:

<iframe allowfullscreen="" frameborder="0" height="360" src="//www.youtube.com/embed/SlHHS7IC7M0?rel=0" width="640"></iframe>

现在我想将上面的代码自动转换为每个帖子:

<div id="wr">
<div class="trigger open"><a href="#">Open</a></div>
<div class="cnt">
<div class="flex-video widescreen"><iframe allowfullscreen="" frameborder="0" height="360" src="//www.youtube.com/embed/SlHHS7IC7M0?rel=0" width="640"></iframe></div>
</div></div>

如何在 jQuery 中做到这一点？

Jsfiddle 文件:https://jsfiddle.net/zzq91smv/2/

谢谢!

Answer 1

尝试将其添加到您的文档准备功能中:

    var template =  '<div class="wr">'+
                    '<div class="trigger open"><a href="#">Open</a></div>'+
                    '<div class="cnt">'+
                    '<div class="flex-video widescreen"></div>'+
                    '</div></div>';

    $('iframe').each(function(ind, ele){
        var $ele = $(ele);
        $ele.after(template);
        $ele.next('.wr').find('.flex-video').append($ele);
    });

See it in action here