Jquery 查找所有容器的第一个子容器

例如，我在html页面中有一堆容器

<div class="container">
    <div class="details">
        <span id="Title">My Title</span>
    </div>
    <div class="details">
        <span id="Title">My Title</span>
    </div>
</div>

<div class="container">
    <div class="details">
        <span id="Title">My Title</span>
    </div>
    <div class="details">
        <span id="Title">My Title</span>
    </div>
</div>

因此，我的理想结果应该是：

<div class="container">
    <div class="details">
        <span id="Title" class="header">My Title</span>
    </div>
    <div class="details">
        <span id="Title">My Title</span>
    </div>
</div>

<div class="container">
    <div class="details">
        <span id="Title" class="header">My Title</span>
    </div>
    <div class="details">
        <span id="Title">My Title</span>
    </div>
</div>

我的头衔
我的头衔
我的头衔
我的头衔

任何帮助都将不胜感激

使用空格或

find（）

来指示子体，而不是

closest（）

使用

:first child

代替

:first

不要对多个元素使用相同的id。看

$（'.container.details:first child'）.find（'.Title'）.addClass（'header'）
.header{
背景：绿色；
}

我的头衔
我的头衔
我的头衔
我的头衔
正如@Rory McCrossan所述，属性“id”必须是唯一的

看看它的工作原理：


请注意，您在整个HTML中重复了
#Title
id
，这是不正确的。任何元素的
id
属性在页面中都必须是唯一的。在继续之前，您需要更改此设置。我看不出您发布的代码对任何元素都能正常工作
.closest（）
搜索祖先，而不是后代。而且没有
class=“详细信息”
在您的HTML中--类名区分大小写。请参阅下面的答案，并让我知道这是否是您需要的，您不需要使用
。每个
--
。addClass
将自动循环所有元素。也许可以为
添加一些CSS。header
以便我们在运行代码段时可以看到结果？
<div class="container">
    <div class="details">
        <span id="Title" class="header">My Title</span>
    </div>
    <div class="details">
        <span id="Title">My Title</span>
    </div>
</div>

<div class="container">
    <div class="details">
        <span id="Title" class="header">My Title</span>
    </div>
    <div class="details">
        <span id="Title">My Title</span>
    </div>
</div>

$(".container .details").children().addClass("header");