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

Question

Привет, друзья! У меня проблема с добавлением специального класса в пару моих дивов.Мой макет выглядит следующим образом.

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

ЕСЛИ ИСТИНА, затем добавьте 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 в своем шаблоне, почему бы не использовать его для решения этой проблемы,Пожалуйста, не стесняйтесь предложить лучший способ, если у вас есть что-то еще.

Answer 1

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

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