Ghost精选图片和iframe问题(Ghost featured image and iframe issue)

Ghost精选图片和iframe问题(Ghost featured image and iframe issue)

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 是

任何人都可以帮助我。

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>

and i used the following 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();

By this code Image replacing with iframe but same iframe showing in every "blog-post". I want to show the parent video only for each "blog-post". Suppose i have 2 blog-post with 2 different iframe. Now i want to show the iframe in are

Anyone can help me please.

最满意答案

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

可以做多种方式，但我会从顶级重复容器开始... 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('....'); });

You have to deal with individual instances by looping over repeating elements

Can do this numerous ways but I would start at the top level repeating containers ... 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('....'); });