Get "src" from an iframe inside a unique div

Question

How is it possible here to get the "src" from the iframe that is inside the div "youtubeHolder"? What's happening in the code below is that it search for all id's starting with youtubeHolder. And there are multiple holders, that is dynamically created as youtubeHolder1, youtubeHolder2 etc.

Any ideas?

Jquery:

$(document).ready(function() {
$('a#export').on('click',function(){
    var contentMap = {};
    $('[id^="youtubeHolder"]').each(function(){
        contentMap[this.id] = $(this).html();
        });
        for(id in contentMap) {

$.ajax({
    url: "post.php",
    type: "post",
    data: { 
        ExportDivID: id,
        ExportDivContent: contentMap[id]
    },
    success: function(){
        alert("success");
    },
    error:function(){
        alert("failure");
    }   
    }); 
    }
    });
    });

Many thanks in advance!

Answer 1

You can get an attribute using .attr('src') from jQuery

More information about that you can find at the jQuery API

So you can get the src-attribute in you code like this:

$(document).ready(function() {
$('a#export').on('click',function(){
    var contentMap = {};
    $('[id^="youtubeHolder"]').each(function(){
        contentMap[this.id] = $(this).html();
        var src = $(this).attr('src');
        alert(src);
        });

    });
    });

I stripped it a little bit, sorry. The most important line is the line var src = $(this).attr('src')

See a working example at http://jsfiddle.net/zP3ED/ . It outputs the src-attribute as JavaScript-alarm. You can use the JavaScript variable src after that.

I hope this helps.

Update:

If you want to use something like this:

<div id="youtubeHolder">
    <iframe src="http://youtube.com/test"></iframe>
</div>

You can do this with a multiple selector like this:

var src = $('iframe',this).attr('src');

See an working example here: http://jsfiddle.net/TIIUNDER/EPjQC/