Find the First child of all containers

Question

I have a bunch of containers in a html page for example

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

I would like to target the first details class in each container and add a class to the Title Class with jQuery.

The JQuery Code I have, works perfectly, but only does this for the first container, and not the second or the third container class.

$('.container').closest('.Details:first').find('#Title').addClass('header');

So my ideal result should be :

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

Any help will be appreciated

Note that you have repeated the `#Title` `id` throughout your HTML which is incorrect. The `id` attribute of any element must be unique within a page. You need to change this before proceeding. — Rory McCrossan, Jun 11 '15 at 19:03
I don't see how the code you posted could work correctly for any elements. `.closest()` searches the ancestors, not the descendants. And there's no `class="Details"` in your HTML -- class names are case-sensitive. — Barmar, Jun 11 '15 at 19:33
See my answer below and let me know if this is what you were looking for — AmmarCSE, Jun 11 '15 at 20:13

score 0 · Answer 1 · edited May 23 '17 at 12:22

Instead of closest() either use a space or find() to indicate descendants.
Use :first-child instead of :first
Do not use the same id for multiple elements. See 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>

Perhaps add some CSS for `.header` so we can see the result when running the snippet? — Barmar, Jun 11 '15 at 19:35

Slico · Answer 2 · 2015-06-11T19:38:33.933

0

As @Rory McCrossan stated attribute "id" must be unique.

See it this works:

jsfiddle

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

edited Jun 11 '15 at 19:38

answered Jun 11 '15 at 19:12

Slico

436
2
16

You don't need to use `.each` -- `.addClass` will automatically loop over all the elements. – Barmar Jun 11 '15 at 19:34

Find the First child of all containers

2 Answers2