jQuery特定のクラス名を持つ第3レベルの子divを持つ親divにクラスを追加する方法

Question

こんにちは私のdivのカップルに特別なクラスを追加する際に問題があります。私のレイアウトはこのようなものです。私はCSSを経由して私のサイドバーのそれぞれに異なる背景色を追加したい

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

とするとき、私は次のようにコーディング：

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

それはそれだけで特定のクラスに背景を適用しているが、その具体的なクラスがあります同じ高さではない。私は実際にこの<div class="grid-2 equal" style="height: 999px;"> divに適用する必要があります。

さて問題は、この

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

にクラス名grid-6とgrid-2は960グリッドシステムの私のPHPによって動的に生成され、またstyle="height: 999px;が平等のためのjQueryのスクリプトによって生成されていることです - 列。

私がしたいことは、このようなユニークなクラス名を追加することです...... .blockのclassとそのさらにIDとchild divを持っているとchild divを持って.equalのclassとdiv探しsidebar-a。

TRUEが、結果はこのように見えるように.equal

のclassを有しているdivメインに.sidebar-aのclassを追加する場合：

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

その後、私はそれをスタイルすることができます

私はテンプレートにjQueryを使用しているので、なぜnこの問題に対処するために使用しないでください。他に何かを念頭に置いておけば、より良い方法を提案してください。

Answer 1

標準的なjQueryセレクタで選択ロジックを実行し、各サイドバーのDOMツリーを移動して、クラスequalの最初のdivを見つけ出し、各サイドバーのIDの名前でクラスを追加できます。

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