Ghostはイメージとiframe問題

Question

HTML

<div class="blog-post"> 
    <div class="blog-image"> 
    <a href="#"><img src="img/featured-img.jpg"/></a> 
    </div> 
    <div class="blog-details"> 
    <h3>Post Title Here</h3> 
    <ul class="blog-meta"> 
     <li>Date</li>    
     <li>Author</li> 
    </ul> 
    <div class="blog-excerpt"> 
     <iframe width="560" height="315" src="https://www.youtube.com/embed/yH4zLmi_6n0" frameborder="0" allowfullscreen></iframe> 
    </div>     
    </div> 

を特色と私はIFRAMEが、同じiframeのは、すべての "ブログ記事" に表示して置き換えて、このコードイメージでJS次

function iframe_posts() { 
    var video_url = $(".blog-details").find("iframe").attr("src"); 
    $(".blog-image").html('<iframe width="560" height="315" src="' + video_url + '" frameborder="0" allowfullscreen></iframe>'); 
    } 
} 

iframe_posts(); 

を使用しました。それぞれの「ブログ投稿」についてのみ親ビデオを表示したい。私は2つの異なるiframeで2つのブログポストを持っていると仮定します。今、iframeを
に表示します。

誰でもお手伝いできます。

Answer 1

をお試しください... class=blog-post

$('.blog-post').each(function(){ 
    // `this` is current instance of `blog-post` 
    var $post = $(this); 
    // use `find()` to look inside this `$post` instance 
    var video_url = $post.find('iframe').attr('src'); 
    $post.find('.blog-image').html('....');  
}); 

Answer 2

あなたはこの数多くの方法を行うことができますが、私はコンテナを繰り返してトップレベルで開始する

繰り返し要素の上をループすることにより、個々の事例に対処する必要があり、このコード

function iframe_posts() { 
    var video_url = $(".blog-details").find("iframe").attr("src"); 
    $(".blog-excerpt").hide(); 
    $(".blog-image").html('<iframe width="560" height="315" src="' + video_url + '" frameborder="0" allowfullscreen></iframe>'); 
} 

Answer 3

$(".blog-post").each(function(){ 
var wrapper = $(this); 
var video_url = wrapper.find("iframe").attr("src"); 
var iframe_content = ('<iframe width="560" height="315" src="' + video_url + '" frameborder="0" allowfullscreen></iframe>'); 
var video_div = wrapper.find(".blog-image") 
video_div.each(function(){ 
      video_div.html(iframe_content); 
}); 

}）;

このコードは私の問題を解決しました。