jQuery向每個div追加一次

我正在開發ServiceNow服務門戶中的YouTube小部件，並且遇到了.append問題。追加是iframes附加到我的div多次，但我只希望它追加一次。我的HTML和客戶端代碼如下：jQuery向每個div追加一次

<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？謝謝！

來源

2017-05-31 Dave

如何我會得到它，因此不同的視頻附加到每個div.fluidMedia？

「Each div.fluidMedia」。只有一個。您可能需要1個div.fluidMedia，每次都會替換iframe，您會看到一個新視頻。

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

或與類「fluidmedia」

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

多個div

來源

2017-06-30 05:48:02

jQuery向每個div追加一次

回答

相關問題