CODEWITHSUNDEEP
javascriptjquery
John Greco
John Greco

Reputation: 45

Append class name to an iframe id that is included under a div class

I have the following code

<div id="ad">
<div id="adsensebanner">
<iframe id="google_ad_randomnumber">
</iframe>
</div>
</div>

and I'm searching of a way to make it like this, using jQuery and CSS attributes matching:

<div id="ad">
<div id="adsensebanner" class="addedclass">
<iframe id="google_ad_randomnumber">
</iframe>
</div>
</div>

Any ideas for searching for div that has another parent div and appending a class to the child one?

Upvotes: 0

Views: 1510

Answers (4)

T.J. Crowder
T.J. Crowder

Reputation: 1074495

Your comments on various answers suggest your HTML is invalid and has more than one id="adsensebanner" in it, but just one id="ad" in it.

Your best bet is to make the HTML valid. There can be only one element with id="adsensebanner" in it.

However, if for some reason you want to only target that one element when it's inside id="ad":

document.querySelector("#ad #adsensebanner").classList.add("addedclass");

or with jQuery:

$("#ad #adsensebanner").addClass("addedclass");

That says "Add 'addedclass' to #adsensebanner only if it's inside #ad." There can be valid use-cases (if the one element with id="adsensebanner" may or may not be within #ad and you don't want to add the class if not), but they're rare.

If you correct the HTML to only have one id="adsensebanner", and you always want to add the class, then:

document.getElementById("adsensebanner").classList.add("addedclass");

or with jQuery:

$("#adsensebanner").addClass("addedclass");

In a comment you've said:

The double division check will definately work, however, my second div's ID name varies, so I would like to have it selected via an attr, like div[id*='adsensebanner']. Is there any workaround for this?

Yes, you can use any of the attribute substring selectors. For instance, if the id will always start with adsensebanner (id="adsensebanner1", id="adsensebanner2", etc.), then the selector to use with querySelector or jQuery would be "#ad div[id^=adsensebanner]". (Or you can use the contains one you mentioned, *=, or $= if it always ends with something.)

Upvotes: 2

Hardik Shah
Hardik Shah

Reputation: 4210

This is only by JavaScript:

 document.getElementById("ad").getElementsByTagName("div")[0].classList.add("addedClass");


$( "#ad div:nth-last-child(1)" ).addClass("addedClass");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="ad">
<div id="adsensebanner">
<iframe id="google_ad_randomnumber">
</iframe>
</div>
</div>

<div id="ad1">
<div id="adsensebanner">
<iframe id="google_ad_randomnumber">
</iframe>
</div>
</div>

This will add a class only to div which have parent div id="ad"

Upvotes: 0

Ullas Hunka
Ullas Hunka

Reputation: 2211

Simple JS can do the trick. And I can't see this div is inside the iFrame. 

var p = document.getElementById("ad");
p.querySelector("[id='adsensebanner']").classList.add("addedClass");
<div id="ad">
  <div id="adsensebanner">
    <iframe id="google_ad_randomnumber">
</iframe>
  </div>
</div>

Upvotes: 0

Suresh Kamrushi
Suresh Kamrushi

Reputation: 16086

Try below:

$('#adsensebanner', window.parent.document).addClass("addedclass");

Upvotes: 0

Related Questions