jQuery向每个div追加一次

Question

我正在ServiceNow的服务门户中开发YouTube小部件，并且遇到了.append的问题。追加是多次将iframe追加到我的div，但我只希望它追加一次。我的HTML和客户端代码如下：

<div class="panel panel-default">
    <div class="panel-heading">
    <span class="panel-title"><i class="fa fa-{{c.glyph}}" aria-hidden="true"></i>&nbsp; {{c.title}}</span>
  </div>

    <div class="fluidMedia"></div>
  </div>

客户端脚本：

   function($scope,$sce,spModal) {
        var c = this;

        //Get option values
        c.title = c.options.title || 'Training Video';
        c.glyph = c.options.glyph || 'youtube';
        //c.video = c.options.video_url;

        console.log('Options');
        console.log(c.options);

        c.server.get().then(function(r) {
            console.log('Response');
            console.log(r);
            c.data.video = $sce.trustAsResourceUrl(r.data.video);
            $('div .fluidMedia').append('<iframe class="media" src='+ c.data.video +' frameborder="0" allowfullscreen></iframe>')
        });
    }

在我的控制台中，我看到这一点，3个视频基本上是彼此叠加的，因为所有这些视频都被附加到div.fluidMedia。我如何得到它，以便每个div.fluidMedia附加一个不同的视频？谢谢！

Answer 1

我如何获得它，以便为每个div.fluidMedia附加一个不同的视频？

“每个div.fluidMedia”。只有一个。你要么想要1个div.fluidMedia，每次都会替换iframe，你会得到一个新的视频。

$('.fluidMedia iframe').empty();
$('div .fluidMedia').append('<iframe class="media" src='+ c.data.video +' frameborder="0" allowfullscreen></iframe>')

或 多个div与类“fluidmedia”

$(.panel).append('<div class="fluidMedia"><iframe class="media" src='+ c.data.video +' frameborder="0" allowfullscreen></iframe></div>');