title: Separate functions from the for loop in ghost
body: <p>Here is my code example below, there I used  <strong>for loop</strong> to get the data from ghost API and its working fine.  I want to append the data with dyanamic youtube image based on the post iframe's video code.</p>
  
  <pre><code>   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 &gt;0){
                 for(var i=0;i &lt; 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("&lt;div class='hidden'&gt;"+post_content+"&lt;/div&gt;");
                        if(post_image.length &gt;0) {
                            single_carousel_container.append('&lt;div class="single-video"&gt;&lt;div class="video-img"&gt;&lt;a href="'+post_url+'"&gt;&lt;img src="'+post_image+'" alt="'+post_url+'" /&gt;&lt;/a&gt;&lt;span class="video-duration"&gt;5.28&lt;/span&gt;&lt;/div&gt;&lt;div class="video-content"&gt;&lt;h4&gt;&lt;a href="'+post_url+'" class="video-title"&gt;'+post_title+'&lt;/a&gt;&lt;/h4&gt;&lt;div class="video-counter"&gt;&lt;div class="video-viewers"&gt; &lt;span class="fa fa-eye view-icon"&gt;&lt;/span&gt; &lt;span&gt;241,021&lt;/span&gt;&lt;/div&gt;&lt;div class="video-feedback"&gt;&lt;div class="video-like-counter"&gt; &lt;span class="fa fa-thumbs-o-up like-icon"&gt;&lt;/span&gt; &lt;span&gt;2140&lt;/span&gt;&lt;/div&gt;&lt;div class="video-like-counter"&gt; &lt;span class="fa fa-thumbs-o-down dislike-icon"&gt;&lt;/span&gt; &lt;span&gt;2140&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;');
                        }
                  $(".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 &amp;&amp; another_image !== "undefined" &amp;&amp; another_image !== "" ) {
                  console.log(another_image);
                           }
                   }
                   });
                  }
                  }
            });
  
  
       },
  </code></pre>
  
  <p>But I want to find the iframe by using <strong>.other .hidden</strong> class and successfully got the YouTube video ID there.</p>
  
  <p>As example i  used the following function for that, </p>
  
  <pre><code>       $(".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 &amp;&amp; another_image !== "undefined" &amp;&amp; another_image !== "" ) {
          console.log(another_image);
                   }
           }
           });
  </code></pre>
  
  <p>That is working fine also, Now i want to show specific image for each post items. Where actually showing multiple images right now. </p>