找到所有容器

我有一堆容器的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的。

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

任何幫助將不勝感激

來源

2015-06-11 Vaaljan

注意，您必須重複'＃'Title'整個id'你的HTML這是不正確。任何元素的'id'屬性在頁面中必須是唯一的。繼續之前，您需要更改此設置。 –

我沒有看到您發佈的代碼如何爲任何元素正常工作。 '.closest（）'搜索祖先，而不是後代。在你的HTML中沒有'class =「Details」 - 類名是區分大小寫的。 – Barmar

看到我的答案在下面，讓我知道如果這是你在找什麼 – AmmarCSE

而不是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>

來源

2015-06-11 19:08:13 AmmarCSE

也許爲'.header'添加一些CSS，以便我們可以在運行代碼片段時看到結果？ – Barmar

@Barmar，謝謝你的建議。添加。 – AmmarCSE

由於@Rory McCrossan指出屬性「ID」必須是唯一的。

看到它這個作品：

jsfiddle

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

來源

2015-06-11 19:12:11 Slico

您不需要使用'.each' - '.addClass'會自動遍歷所有元素。 – Barmar

你是對的。我更新了我的答案和小提琴，謝謝！ – Slico

找到所有容器

回答

相關問題