Javascript Ghost特色图像和iframe问题

Javascript Ghost特色图像和iframe问题,javascript,jquery,html,ghost,Javascript,Jquery,Html,Ghost,HTML 我使用了下面的js <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> <u

HTML

我使用了下面的js

<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。我只想为每个博客文章显示家长视频。假设我有两篇带有两个不同iframe的博客文章。现在我想在中显示iframe 是

任何人都可以帮我

试试这段代码

  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();

您必须通过在重复元素上循环来处理单个实例

可以用很多方法来实现这一点,但我会从顶级重复容器开始。。。class=博客文章

})


这段代码解决了我的问题

还是一样的。$。blog-details.findiframe.attrsrc只能返回一个值…将来自第一个选择器匹配,但将应用于每个$.blog图像,并使用相同的urlvar包装器=$this;var embed_url=wrapper.findiframe.attrsrc;通过使用该代码,我确实选择了iframe。但我如何从那个博客摘录区域中选择第一个框架呢?如果用户添加了多个iframe,那么我希望首先在博客图像区域中显示。。所以我需要通过jquery找到第一个iframe
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>');
}
$('.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('....');    
});
$(".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);
 });