Jquery - Replace Specific Line in HTML

Question

I'm having an issue with iframes and IDs.

I currently have an Iframe with no ID attached to as its generated by another websites javascript. So I quickly wrote a Jquery script to give IDs to Iframes on load of page, and it worked successfully. Problem is however, it applies the ID to ALL the Iframes on the page instead of specifically the one I want.

This is what I have.

<script>
 $(document).ready(function () {
$("iframe").attr({ 
  id: "iframeid1"
});
});</script>

Is there a method with Jquery to 'search and replace' something specific on the page? For example

Search for:

<iframe allowtransparency="true" frameborder="0" scrolling="no" width="160" height="600"

Replace with:

<iframe id="iframeid1" allowtransparency="true" frameborder="0" scrolling="no" width="160" height="600"

Any help is appreciated! Thanks in advance!

need more info about the html markup around the iframe. is the iframe wrapped inside a div? would be great if you can post the html around the iframe. — Shadow_boi
– Shadow_boi, Commented Nov 10, 2011 at 2:49

Stoive · Accepted Answer · 2011-11-10 02:48:44Z

1

If you know it is the nth iframe on the page:

$("iframe")[n].setAttribute('id', 'iframe1');

EDIT: You could also use attribute selectors:

$("iframe[allowtransparency=true][frameborder=no][etc=etc]").attr({id: 'iframe1'});

answered Nov 10, 2011 at 2:48

Stoive

11.3k4 gold badges26 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

GregL · Accepted Answer · 2011-11-10 02:50:01Z

1

It depends on if there is a unique way of finding the iframe you want. For example, is it the only one with width = 160 and height = 600? Or is it always the Xth iframe on the page? Is it always located in the same spot in the page?

Here are some queries as examples for all 3 scenarios:

// if the width/height combination is unique...
var iframe = $('iframe[width=160][height=600]');

// if it is always, say, the 3rd iframe on the page
var iframe = $('iframe:eq(2)'); // 0-based index

// if it is always the only iframe in a div with an id of "iframeContainer"...
var iframe = $('#iframeContainer').find('iframe');

Then you can set the attribute like you said:

iframe.attr('id', 'iframeid1');

answered Nov 10, 2011 at 2:50

GregL

38.2k8 gold badges65 silver badges68 bronze badges

Comments

Shadow_boi · Accepted Answer · 2011-11-10 02:51:48Z

1

if the iframe is wrapped inside a div, with a ID, than you can do:

<script>
 $(document).ready(function () {
$("#divID iframe").attr({ 
  id: "iframeid1"
});
});</script>

answered Nov 10, 2011 at 2:51

Shadow_boi

2,2082 gold badges23 silver badges26 bronze badges

Comments

polyhedron · Accepted Answer · 2011-11-10 02:52:33Z

0

If you know where your iframe is at you can get it by index position.

If you have 4 iframes on the page and you're looking for the third (with respect to the DOM), you can do this:

$("iframe").get(3).attr({ 
  id: "iframeid1"
});

answered Nov 10, 2011 at 2:52

polyhedron

1,5904 gold badges19 silver badges27 bronze badges

Comments

jfriend00 · Accepted Answer · 2011-11-10 02:53:58Z

0

You can use selectors to find an iframe tag with specific attributes. But you need to be able to uniquely identify the specific iframe you want from attribute values, not HTML search.

As an example:

$('iframe[width="160"][height="600"]').attr("id", "iframeid1");

This would select iframe tags with width=160 and height=600. You can add more attributes if needed to uniquely select your particular iframe.

Perhaps the best option would be to use the DOM structure around the iframe to identify which one you want. You could use parent object identifiers, ordering of the tags, etc.. whatever helps uniquely identify the one you want.

edited Nov 10, 2011 at 2:53

answered Nov 10, 2011 at 2:47

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

Collectives™ on Stack Overflow

Jquery - Replace Specific Line in HTML

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related