Question

I have a jsFiddle here : http://jsfiddle.net/ZXDYS/22/

I am creating Blogger post summaries using jQuery although it will not return the element iframe’s attr src…You can find the blog here for reference . what have i done wrong? please help!

$.ajax({
    url: 'http://www.blogger.com/feeds/1570527947646221682/posts/default?alt=json-in-script&max-results=3',
    type: 'get',
    dataType: "jsonp",
    success: function(data){
        for (var i = 0; i < data.feed.entry.length; i++){
            var title = data.feed.entry[i].title.$t;
            var content = data.feed.entry[i].content.$t;
            var img = $(content).find("img").attr("src");
            var iframe = $(content).find("iframe").attr("src");
            if(img==undefined){
                var imgsrc = "no image in post :( sorry?";
                    }else{
                    var imgsrc = img;
            }
            $('div.related').append('<table border="1"><tr><td colspan="2">post title - '+title+'</td></tr><tr><th width="100%">Image src</th><th width="100px">Iframe src</th></tr><tr><td>'+imgsrc+'</td><td>'+iframe+'</td></tr></table>');           
        }
    }
});​

Answer 1

The returned string from your JSONP request looks like:

<iframe width="100%" height="315" src="http://www.youtube.com/embed/9u7Fp2VVdkM"
 frameborder="0" allowfullscreen></iframe>video
<div class="blogger-post-footer">
   <img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/1570527947646221682-8424983193135836585?l=ykhaliq.blogspot.com' alt='' />
</div>

Notice that the <iframe> element does not have a parent element. The .find method finds any descendants, but not the “root” elements.

A general solution is to create a wrapper, and append the string:

var $content = $('<div>').html(content);
var img = $content.find("img").attr("src");
var iframe = $content.find("iframe").attr("src");

Fixed code: http://jsfiddle.net/ZXDYS/31/