为博客中的每个视频自动添加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);
    });

在这里看到它的作用

Answer 2

试过追加

var length = 3;
for (var i=0; i<length; i+=1) {
    $(document.body).append('<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>');
}