jQuery将：nth-​​child（＃）和addClass（）应用于div，不会将class添加到元素

Question

I have tried many variations of applying the :nth-child , using 1, 2, 3, etc. trying to get a hit on the div I need to add a class to: <div style="width: 304px; height: 78px;"> .

I was able to add a class to the parent div: .g-recaptcha so I know my jQuery is working. I have also tried variations of $('.g-recaptcha :nth-child(1)').addClass('bbbb'); , adding div.g-recaptcha div:nth-child(1) - prefixing with a div but still not luck.

Can you tell me what I am doing wrong or why I cannot get a class added to: <div style="width: 304px; height: 78px;"> ?

jQuery

$('.g-recaptcha :nth-child(1)').addClass('bbbb');

HTML

<div class="ginput_container">
    <div class="g-recaptcha" data-sitekey="6Le59BwTAAAAABBcVxJyYHAbAzfFn8D6cLyVdPm9" data-theme="light">
        <div>
            <div style="width: 304px; height: 78px;">
                <iframe src="https://www.google.com/recaptcha/api2/anchor?k=6Le59BwTAAAAABBcVxJyYHAbAzfFn8D6cLyVdPm9&amp;co=aHR0cDovL3d3dy5zaWxraW5tYW5hZ2VtZW50Z3JvdXAuY29tOjgw&amp;hl=en&amp;v=r20160404124926&amp;theme=light&amp;size=normal&amp;cb=xksc4agtgw8z" title="recaptcha widget" width="304" height="78" role="presentation" frameborder="0" scrolling="no" name="undefined"></iframe>

            </div>

            <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px; height: 40px; border: 1px solid #c1c1c1; margin: 10px 25px; padding: 0px; resize: none;  display: none; "></textarea>

        </div>

Answer 1

With this way , you are sure to target the right div with your code :

$('div[style="width: 304px; height: 78px;"]').addClass('bbbb');

OR this way :

$('.g-recaptcha div').find('div').addClass('bbbb');

Answer 2

You can try this,

1) Working Fiddle

$('.g-recaptcha iframe').parent().addClass('bbbb');

get hold of the iframe inside the div .g-recaptcha and it is to this iframe parent div you need to add the class. So find the parent of this iframe and add the class.

This works if you have only 1 iframe inside your .g-recaptcha div, If your HTML structure doesnt support this code let me know... We can improve

2) Working Fiddle

  $('.g-recaptcha div:eq(1)').addClass('bbbb');

Use eq() selector to access the div's by index

3) Working Fiddle

$('.g-recaptcha div div').addClass('bbbb');

Since you have 2 nested div's you can find the inner div like this..

Also many more...

---

Edit 1: As suggested by CupawnTae you can also do this

$('.g-recaptcha iframe[title="recaptcha widget"]').parent().addClass('bbbb');

Answer 3

To target the first div inside a div inside .g-recaptcha you can use

.g-recaptcha>div>div:first-child

Or to target the parent of the element with title="recaptcha widget" , use

$('[title="recaptcha widget"]').parent()

Example:

 $('[title="recaptcha widget"]').parent().addClass('bbbb'); 

 .bbbb { background: red; padding: 20px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="ginput_container"> <div class="g-recaptcha" data-sitekey="6Le59BwTAAAAABBcVxJyYHAbAzfFn8D6cLyVdPm9" data-theme="light"><div> <div style="width: 304px; height: 78px;"> <iframe src="https://www.google.com/recaptcha/api2/anchor?k=6Le59BwTAAAAABBcVxJyYHAbAzfFn8D6cLyVdPm9&amp;co=aHR0cDovL3d3dy5zaWxraW5tYW5hZ2VtZW50Z3JvdXAuY29tOjgw&amp;hl=en&amp;v=r20160404124926&amp;theme=light&amp;size=normal&amp;cb=xksc4agtgw8z" title="recaptcha widget" width="304" height="78" role="presentation" frameborder="0" scrolling="no" name="undefined"></iframe> </div> <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px; height: 40px; border: 1px solid #c1c1c1; margin: 10px 25px; padding: 0px; resize: none; display: none; "></textarea> </div> 

Answer 4

The div you are targeting is a sibling and not a child of g-recaptcha

Use something like

$('.g-recaptcha + div').addClass('bbbb');

Or use some selector like siblings()