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>');
}
}
});
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");