0

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?

T.J. Crowder
  • 879,024
  • 165
  • 1,615
  • 1,639
John Greco
  • 45
  • 5

4 Answers4

2

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.)

T.J. Crowder
  • 879,024
  • 165
  • 1,615
  • 1,639
  • Nicely explained answer. – Ullas Hunka Jul 19 '18 at 09:20
  • Thanks for the detailed answer. Much appreciated. 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? I tried a static name but im not sure if wrapping the code around – John Greco Jul 19 '18 at 09:24
  • @JohnGreco - Yes, I've added that to the end of the answer. – T.J. Crowder Jul 19 '18 at 09:34
  • Thanks @T.J.Crowder - amazing and detailed so far. I've wrapped it in my exact code but it doesnt seem to be working here, can you please give a check? http://jsfiddle.net/6x4g7n8e/4/ – John Greco Jul 19 '18 at 09:39
  • @JohnGreco - Script code runs immediately when the parser encounters the `script` tag (in the normal case). The elements *below* that script in the HTML don't exist as of when the script runs ([more in this answer](https://stackoverflow.com/a/8716680/157247)). Move your `script` tags to the *end* of the `body`, just before the closing `

    ` tag (just at the end of the HTML frame, in a fiddle).

     – T.J. Crowder Jul 19 '18 at 09:41
  • Sorry for it, im not really familiar with jQuery! Thanks for the help! supersaved me! – John Greco Jul 19 '18 at 09:53
  • @JohnGreco - The URLs in that fiddle are invalid (open the web console to see errors). The script at the bottom seems okay, if you really want to use `*=` instead of `^=`. – T.J. Crowder Jul 19 '18 at 10:19
  • Okay @T.J.Crowder - run fine! Thanks a lot! By the way, I ended up using position sticky of CSS, which will provide a lighter way of the function. – John Greco Jul 19 '18 at 11:17
0

Try below:

$('#adsensebanner', window.parent.document).addClass("addedclass");
Suresh Kamrushi
  • 13,699
  • 12
  • 70
  • 84
  • Thanks, but I need to identify the specific parent div, in order to prevent having it added on other parent divs. Your code will add it everywhere. – John Greco Jul 19 '18 at 09:08
  • @ Suresh - I doubt the OP's code is running in the iframe, given it's a Google ad frame. – T.J. Crowder Jul 19 '18 at 09:10
  • First division, called "ad" is from my code. Second division and iframe are parsed from AdSense. – John Greco Jul 19 '18 at 09:11
  • @JohnGreco - Doesn't matter, it's your document. If you have multiple ad blocks on the page, you need to configure them appropriately (Google provides a way to do that without having duplicated `id` values). – T.J. Crowder Jul 19 '18 at 09:14
0

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>
Ullas Hunka
  • 1,939
  • 1
  • 12
  • 26
0

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"

Hardik Shah
  • 3,241
  • 2
  • 17
  • 36