jQuery如何將類添加到具有特定類名的第三級子div的父div

你好朋友我有一個問題，爲我的幾個div添加一個特殊的類。我的佈局是這樣的。jQuery如何將類添加到具有特定類名的第三級子div的父div

<div class="container"> 
    <div class="grid-6 push-3 equal" style="height: 999px;"> 
     <div class="block"> 
      <div id="mainbody"> 
       <!-- Body content here --> 
      </div> 
     </div> 
    </div> 

    <div class="grid-2 equal" style="height: 999px;"> 
     <div class="block"> 
      <div id="sidebar-a"> 
       <!-- Sidebar-a content here --> 
      </div> 
     </div> 
    </div> 

    <div class="grid-2 equal" style="height: 999px;"> 
     <div class="block"> 
      <div id="sidebar-b"> 
       <!-- Sidebar-b content here --> 
      </div> 
     </div> 
    </div> 

    <div class="grid-2 equal" style="height: 999px;"> 
     <div class="block"> 
      <div id="sidebar-c"> 
       <!-- Sidebar-c content here --> 
      </div> 
     </div> 
    </div> 
</div>

我想通過CSS不同的背景顏色添加到我的每一個側邊欄，當我如下代碼：

#mainbody { background : #fff; } 
#sidebar-a { background : #eee; } 
#sidebar-b { background : #ddd; } 
#sidebar-c { background : #ccc; }

正在申報後臺只對特定的階層，而是特定類不等高。我其實需要申請這個<div class="grid-2 equal" style="height: 999px;">股利。

現在的問題是，在這個

<div class="grid-6 push-3 equal" style="height: 999px;">和<div class="grid-2 equal" style="height: 999px;">

類名grid-6和grid-2是由我的960網格系統的PHP動態生成，也由一個jQuery腳本平等產生的style="height: 999px; -列。

我想要的是與ID的添加唯一的類名像這樣......尋找一個div與class的.equal其具有的.block一個class並進一步child div有child divsidebar-a。

如果爲true，然後添加.sidebar-a的class到主div具有class的.equal

這樣的結果看起來是這樣的：

<div class="grid-6 equal push-3 mainbody" style="height: 999px;"> 
<div class="grid-2 equal sidebar-a" style="height: 999px;"> 
<div class="grid-2 equal sidebar-b" style="height: 999px;"> 
<div class="grid-2 equal sidebar-c" style="height: 999px;">

然後我就可以設置樣式像這樣：

.mainbody { background : #fff; } 
.sidebar-a { background : #eee; } 
.sidebar-b { background : #ddd; } 
.sidebar-c { background : #ccc; }

因此，我認爲，因爲我反正在我的模板中使用jQuery，爲什麼n不要用它來解決這個問題。如果您有其他想法，請隨時提出更好的方法。

來源

2011-01-07 Vikram Rao

經典錯誤第一：重複的ID屬性。你的文檔是無效的，並且在你解決這個問題之前，JavaScript會表現得有趣和/或失敗......除非這只是一個錯字！（側欄b列出兩次） – Stephen 2011-01-07 21:55:52

哦，是的，這是一個錯字。對於那個很抱歉。感謝您指出。 – 2011-01-07 21:59:16

您可以在標準jQuery選擇器中執行選擇邏輯，然後爲每個邊欄找到DOM樹，找到類equal的第一個div，並用每個邊欄ID的名稱附上一個類：

$('div.equal div.block div[id^="sidebar"]').each(function() { 
    $(this).closest('div.equal').addClass(this.id); 
});

來源

2011-01-07 21:58:18

jQuery如何將類添加到具有特定類名的第三級子div的父div

回答

相關問題