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

jquery - 找到所有容器的第一个孩子,第1张

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

任何帮助将不胜感激

最佳答案:

2 个答案:

答案 0 :(得分:0)

  1. 而不是closest()使用空格find()来表示后代。
  2. 使用:first-child代替:first
  3. 不要对多个元素使用相同的ID。请参阅Why is it a bad thing to have multiple HTML elements with the same id attribute?
  4. $('.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>

    答案 1 :(得分:0)

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

    看到它有效:

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

    $(".container .details").children().addClass("header");
    
    本文经用户投稿或网站收集转载,如有侵权请联系本站。

发表评论

0条回复