如何使用 jQuery 中的类选择第一个子 div？答案

【问题标题】：How to select first child div using class in jQuery?如何使用 jQuery 中的类选择第一个子 div？
【发布时间】：2014-04-23 21:29:43
【问题描述】：

我有侧边栏框，我想在点击事件中更改单个框的内容。

这是我的代码：

<div class="sidebar">
    <div class="box">    //box 1 
        <div class="box-t">      
            <div class="box-b">
                <div class="">
                    <h2>This is sample box 1</h2>
                    <p style="text-align: left;">Please give us a shout at 
                        <a href="mailto:concierge@example.com">concierge@example.com</a>.
                    </p>
                </div>
            </div>
        </div>
    </div>
    <div class="box">    //box 2 
        <div class="box-t">      
            <div class="box-b">
                <div class="">
                    <h2>This is sample box 2</h2>
                    <p style="text-align: left;">Please give us a shout at 
                        <a href="mailto:concierge@example.com">concierge@example.com</a>.
                    </p>
                </div>
            </div>
        </div>
    </div>
</div> //sidebar div close

以上代码是动态生成的，我想通过单击一个按钮来更改第一个框的内容。

所以要从侧边栏访问第一个子 div，我使用了：

$('div.sidebar > : first-child').html('<div>hiiiiiiii</div>');

我也试过了：

$('div.sidebar > : first-child').replaceWith('hiiiiiiii');

但上述两种尝试都没有改变任何数据。

缺少什么或有任何其他方法可以从具有相同类的多个 div 中更改单个 div 的内容？

【问题讨论】：

使用这个 $('div.sidebar > :first-child')
添加到@Jérôme 评论jsfiddle.net/D9z9q

标签： jquery html

【解决方案1】：

您确实不需要父 > 孩子也必须不在 : 和 first-child 之间有空格

Live Demo

$('div.sidebar :first-child').html('<div>hiiiiiiii</div>');

:first-child 选择其第一个子元素的所有元素父母。

如果您只想要第一个元素，请选择:first

:first 选择第一个匹配的元素。

Live Demo

$('div.sidebar :first').html('<div>hiiiiiiii</div>');

【讨论】：

:first-child 和 :first 之间非常重要的区别，这使得这是最合适的答案。

【解决方案2】：

试试这个：

$('div.sidebar').first().html('<div>hiiiiiiii</div>');

或

$('div.sidebar').eq(1).html('<div>hiiiiiiii</div>');

或

$('div.sidebar')[0].html('<div>hiiiiiiii</div>');

【讨论】：

抱歉，最后一个不起作用，它返回一个普通的对象，并且没有.html function！ $("div")[0].innerHTML = "..."
我没有尝试最后一个，但你可以这样尝试：$($('div.sidebar')[0]).html('
hiiiiiiii
') ;

【解决方案3】：

您需要使用:first。它只会选择带有类侧边栏的 div 的第一个孩子：

$("div.sidebar :first").html('<div>hiiiiiiii</div>');

Here is DEMO

【讨论】：

【解决方案4】：

: 和 first-child 之间不需要空格。当您使用空格时，选择器将尝试匹配div.sidebar 的后代:，这将导致以下语法错误：

Uncaught Error: Syntax error, unrecognized expression: div.sidebar > : first-child

所以你需要删除空格：

$('div.sidebar > :first-child').html('<div>hiiiiiiii</div>');

Fiddle Demo

【讨论】：

【解决方案5】：

$('div.sidebar : first-child').html('<div>hi with just 1 i </div>');

【讨论】：

【解决方案6】：

$('div.sidebar :first-child').html('hiiiiii');

Refer here
: 和 first 之间不需要空格

【讨论】：