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

尝试append？

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>');
}

Answer 2

尝试将此添加到您的doc ready函数中：

    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

自动为博客中的每个视频添加一个HTML代码

2 个答案: