jQuery 특정 클래스 이름을 가진 제 3 수준 하위 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 960 그리드 시스템의 내 PHP에 의해 동적으로 생성되고, 또한 style="height: 999px;은 평등에 대한 jQuery를 스크립트에 의해 생성되는 것입니다 - 컬럼. 내가 원하는 무엇

는 ID의와 child div을 .block의 class하고있는 더와 child div을 가지고 .equal의 class와 div을 찾아 ...... 같은 고유 클래스 이름을 추가 가지고하는 것입니다 sidebar-a.

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

그럼 내가 스타일을 할 수 있습니다 : TRUE IF

는 .equal

그래서 결과는 다음과 같습니다하는 class의이있는 주요 div에 class.sidebar-a의 추가 like :

따라서 어쨌든 나는 왜 내 템플릿에서 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); 
});