Question

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

我想在每个容器中定位第一个详细信息类，并使用jQuery向Title类添加一个类。

我拥有的JQuery代码完美无缺，但只对第一个容器执行此操作，而不是第二个或第三个容器类。

$('.container').closest('.Details:first').find('#Title').addClass('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>

任何帮助将不胜感激

Answer 1

而不是closest()使用空格或find()来表示后代。
使用:first-child代替:first
不要对多个元素使用相同的ID。请参阅Why is it a bad thing to have multiple HTML elements with the same id attribute?

$('.container .details:first-child').find('.Title').addClass('header');

.header{
  background:green;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="container">
  <div class="details">
    <span class="Title">My Title</span>
  </div>
  <div class="details">
    <span class="Title">My Title</span>
  </div>
</div>

<div class="container">
  <div class="details">

    <span class="Title">My Title</span>
  </div>
  <div class="details">
    <span class="Title">My Title</span>
  </div>
</div>

Answer 2

正如@Rory McCrossan所说，属性“id”必须是唯一的。

看到它有效：

http://example.com/en-gb/news/sports

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

找到所有容器的第一个孩子

2 个答案: