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，但在每个＆＃34; blog-post＆＃34;中显示相同的iframe。我想只为每个＆＃34;博客帖子＆＃34;显示父视频。假设我有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('....');    
});

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

  A   B  C  D  E  F  G
  a   1  2  3  5
  b   1  3  4  6
  c   1  2  5  6

}）;

此代码解决了我的问题..

Ghost精选图片和iframe问题

3 个答案: