CODEWITHSUNDEEP
javascripthtmljqueryiframe
Cuno
Cuno

Reputation: 89

Adding IDs to DIV containers within an iFrame with jQuery

I am trying to add ID's to DIV containers in an iFrame with jQuery:

HTML original:

<iframe id="iFrame">
..
<div class="book-type">..</div>
<div class="book-type">..</div>
<div class="book-type">..</div>
..
</iframe>

HTML modified:

<iframe id="iFrame">
..
<div class="book-type" id="type1">..</div>
<div class="book-type" id="type2">..</div>
<div class="book-type" id="type3">..</div>
..
</iframe>

I tried to edit the HTML with following script but it's not working (running but no change and no error) and I'm not sure how the correct selector for the each() function works within an iframe (the DIVs to modify are wrapped in several DIVs with no IDs but classes).

$(document).ready(function() {
    $('#iFrame').ready(function() {
        $('#iFrame').contents().find('div').each($('.book-type'), function(ind) {
            $(this).attr('id', 'type' + parseInt(ind + 1));
        });
    });
});

I would be very grateful if someone could help me!

Upvotes: 0

Views: 147

Answers (2)

Cuno
Cuno

Reputation: 89

Problem solved! The query whether the iFrame is loaded didn't work because an iFrame does not know ready() but load().

$(document).ready(function() {
    $('#iFrame').load(function() {
        $('#iFrame').contents().find('.book-type').each(function(ind) {
            $(this).attr('id', 'type' + (ind + 1));
        });
    });
});

Upvotes: 1

isherwood
isherwood

Reputation: 61063

You may be right that your selector is faulty. Simplify to just this:

$('#iFrame').contents().find('.book-type').each(function(ind) {
    $(this).attr('id', 'type' + (ind + 1));
});

Upvotes: 1

Related Questions