jQuery Как добавить класс в родительский div, который имеет дочерний div третьего уровня с определенным именем класса

Question

Привет друзья У меня проблема с добавлением специального класса в пару моих 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.

Теперь проблема в том, что в этом

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

имен классов grid-6 и grid-2 генерируются динамически мой PHP 960 Grid System, а также style="height: 999px; генерируется скрипт JQuery для Equal -Columns.

То, что я хочу, чтобы добавить уникальное имя класса, как это ...... Посмотрите на div с class из .equal, который имеет child div с class из .block и который дополнительно имеет child div с ID из sidebar-a.

Если TRUE, то добавьте class из .sidebar-a к главному 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 использовать его для решения этой проблемы. Пожалуйста, не стесняйтесь предлагать лучший способ, если у вас есть что-то еще в виду.

Answer 1

Вы можете выполнить логику выбора в стандартном селекторе jQuery, а затем для каждой боковой панели вы найдете путешествие по дереву DOM, которое ищет первый div с классом equal и прикрепляет к нему класс с именем каждого идентификатора боковой панели:

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