클래스를 찾고 jquery로 스타일을 적용하는 방법은 무엇입니까?

Question

나는이 예제를 css3로만 만든 아코디언 jsfiddle에, js가 없습니다.

HTML :

<div class="ac-container"> 
    <div> 
     <input id="ac-1" name="accordion-1" type="radio" checked /> 
     <label for="ac-1">About us</label> 
     <article class="ac-small"> 
      <p id="test_small">test</p> <-- this tag will come from php 
     </article> 
    </div> 
    <div> 
     <input id="ac-2" name="accordion-1" type="radio" /> 
     <label for="ac-2">How we work</label> 
     <article class="ac-medium"> 
      <p id="test_medium">test</p> 
     </article> 
    </div> 
</div>​ 

CSS :

.ac-container input:checked ~ article.ac-small{ 
    height: 140px; 
} 
.ac-container input:checked ~ article.ac-medium{ 
    height: 180px; 
} 
.ac-container input:checked ~ article.ac-large{ 
    /* height: 240px;*/ 
} 

내가 가지고있는 문제는 높이가 이미 설정되어 있는지, 그리고 내가 PHP로 내용을 추가하고 난 아니에요 얼마나 많은 콘텐츠가 될 것이므로 나는 동적 인 높이가 필요합니다.

var v = $("#test_small").height(); 

// add the height to the .ac-small 
$('.ac-container input:checked article.ac-small').css("height", v+'px'); 

내가 가지고있는 문제는 CSS를 늘 선택기에 적용하는 것이, 내가 선택 $('.ac-container input:checked article.ac-small')이 잘못된 생각이다 :이 같은 높이를 찾을 수 있도록

는 PHP는 p 태그를로드한다 또는 뭔가.

Answer 1

는

$('.ac-container input:checked').parent('div').children('article.ac-small').css("height", v+'px'); 

Answer 2

선택기가 잘못되었습니다. 내가 그 선택이 가져 오는 것을 당신에게 설명 할 수 있도록 허용 :

$('.ac-container input:checked article.ac-small') 

그것은 요소 ac-container 요소 내에 존재 확인 입력의 내부에 존재하는 클래스 ac-small와 <article> 요소를 선택합니다.

그럼 당신은에서 요소를 입력의 내부 ...

할 수있는 권한은 없습니다 css 당신이 셀렉터의 오른쪽을 쓴 : 당신은 next sibling selector를 사용하려면

.ac-container input:checked ~ article.ac-small{ 
    height: 140px; 
} 

Answer 3

합니다.

$('.ac-container').find('input:checked').siblings('article.ac-small') 

또는 더 정확하게 (다음 형제에 대한) :

$('.ac-container input:checked ~ article.ac-small') 

당신은 또한이 쓸 수 : 그 선택을 가진 아이에 반대 ~는, 그 선택 일치하는 다음 형제를 선택

$('.ac-container').find('input:checked').nextAll('article.ac-small') 

Answer 4

이

var v = $("#ac-small").height(); 

할3210

하지만 id가 "ac-small"인 요소가 없습니다.

Answer 5

의 첫 번째 시도 :
당신은

var v = $(".ac-small").height(); 

두 번째 클래스에 ID를 변경해야합니다 :
당신이 당신의 입력의 형제를 얻고 싶다면 당신은 그것을해야만합니다 :
내부에 입력을 확인하십시오 컨테이너가 발견되면 기사 형제를 얻은 다음 CSS를 설정합니다.

$('.ac-container').find('input:checked').siblings('article').css("height", v+'px');