javascript - 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>

我使用了以下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();

通过此代码，图像替换为 iframe，但每个“博客文章”中都显示相同的 iframe。我只想显示每个“博客文章”的父视频。假设我有 2 篇博客文章，其中有 2 个不同的 iframe。现在我想在
中显示 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('....');    
});