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

Question

我尝试了应用:nth-child的许多变体，使用1,2,3等尝试获取div我需要添加一个类：<div style="width: 304px; height: 78px;">。

我能够在父div中添加一个类：.g-recaptcha所以我知道我的jQuery正在运行。我还尝试了$('.g-recaptcha :nth-child(1)').addClass('bbbb');的变体，添加了div.g-recaptcha div:nth-child(1) - 前缀为div但仍然没有运气。

你能告诉我我做错了什么或为什么我不能把课程添加到：<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，您确定使用您的代码定位正确的div：

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

OR this way :

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

Answer 2

你可以试试这个，

1） Working Fiddle

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

抓住div .g-recaptcha中的iframe，并且这个iframe父div需要添加该类。所以找到这个iframe的父级并添加该类。

如果您的.g-recaptcha div中只有1个iframe，则此方法有效。如果您的HTML结构不支持此代码，请告知我们......我们可以改进

2） Working Fiddle

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

使用 eq() 选择器按索引访问div

3） Working Fiddle

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

由于你有两个嵌套的div，你可以找到这样的内部div ..

还有更多......

编辑1：根据CupawnTae的建议你也可以这样做

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

Answer 3

要定位div内div内的第一个.g-recaptcha，您可以使用

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

或者使用title="recaptcha widget"定位元素的父级，请使用

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

示例：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 4

您定位的div是兄弟，而不是g-recaptcha

的孩子

使用类似

的内容

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

或使用某些选择器，如兄弟姐妹（）