Question

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

这是我的代码：

<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的内容？

Answer 1

你不需要父{1}}孩子，你必须不在>和:

<强> Live Demo

first-child

:first-child选择属于他们的第一个孩子的所有元素父节点。

如果您只想要第一个元素，请转到$('div.sidebar :first-child').html('<div>hiiiiiiii</div>');

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

<强> Live Demo

:first

Answer 2

试试这个：

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

OR

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

OR

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

Answer 3

您需要使用:first。它将只选择div侧栏的第一个孩子：

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

Here is DEMO

Answer 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

Answer 5

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

Answer 6

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

Refer here
在：和第一个

之间不需要空间

如何在jQuery中使用类选择第一个子div？

6 个答案: