与鬼魂中的for循环分开的功能

时间:2017-07-31 12:30:42

标签: javascript jquery iframe ghost

下面是我的代码示例,在那里我使用 for loop 从ghost API获取数据并且工作正常。我想根据帖子iframe的视频代码在dyanamic youtube图片上附加数据。

   single_carousel: function(){
          var post_type_two               = "carousel";
          var section_heading_one         = "Trending Videos";
          var single_carousel_container   = $(".video-carousel");
          var single_carousel_items       = "all";
          $(".section-heading-one h3").append(section_heading_one);
          $.get(ghost.url.api("posts",{        
            filter: "tag:"+post_type_two+"",
            limit : single_carousel_items
          })).done(function(data){
             var postsInfo = data.posts;
             if(postsInfo.length >0){
               for(var i=0;i < postsInfo.length; i++){
                      post_title   = postsInfo[i].title;
                      post_url     = postsInfo[i].url;
                      post_image   = postsInfo[i].image;
                      post_content = postsInfo[i].html;                  
                     $(".other").append("<div class='hidden'>"+post_content+"</div>");
                      if(post_image.length >0) {
                          single_carousel_container.append('<div class="single-video"><div class="video-img"><a href="'+post_url+'"><img src="'+post_image+'" alt="'+post_url+'" /></a><span class="video-duration">5.28</span></div><div class="video-content"><h4><a href="'+post_url+'" class="video-title">'+post_title+'</a></h4><div class="video-counter"><div class="video-viewers"> <span class="fa fa-eye view-icon"></span> <span>241,021</span></div><div class="video-feedback"><div class="video-like-counter"> <span class="fa fa-thumbs-o-up like-icon"></span> <span>2140</span></div><div class="video-like-counter"> <span class="fa fa-thumbs-o-down dislike-icon"></span> <span>2140</span></div></div></div></div></div>');
                      }
                $(".other .hidden").each(function(){
                var iframe_src =   $(this).find("iframe").attr("src");
                if(typeof iframe_src !== "undefined"){
                var video_id = iframe_src.slice(-11);
                var another_image =  'http://i3.ytimg.com/vi/'+video_id+'/maxresdefault.jpg';                       
                if(another_image !== null && another_image !== "undefined" && another_image !== "" ) {
                console.log(another_image);
                         }
                 }
                 });
                }
                }
          });


     },

但我希望使用 .other .hidden 课程找到iframe,并成功获得YouTube视频ID。

作为示例,我使用了以下函数,

       $(".other .hidden").each(function(){
        var iframe_src =   $(this).find("iframe").attr("src");
        if(typeof iframe_src !== "undefined"){
        var video_id = iframe_src.slice(-11);
        var another_image =  'http://i3.ytimg.com/vi/'+video_id+'/maxresdefault.jpg';                       
        if(another_image !== null && another_image !== "undefined" && another_image !== "" ) {
        console.log(another_image);
                 }
         }
         });

这也正常,现在我想为每个帖子项目显示特定的图像。现在实际显示多个图像的地方。

0 个答案:

没有答案