요소 : 첫 번째 자식 강제 재평가

나는 ".hidden" 클래스를 보유하고 있으며 실시간으로 DOM 요소를 작성합니다. 그래서 같은 간단한 코드를 얻을 :요소 : 첫 번째 자식 강제 재평가

... 
    <div class="hidden">1</div> 
    <div class="hidden">2</div> 
    <div class="hidden">3</div> 
...

내 CSS 정의가 단순한 이상이다 :

.hidden { 
display: none; 
} 

.hidden:first-child { 
display: block; 
}

모든 좋은 모두가 행복입니다. 이제 다음과 같이하면 : $('.hidden:first-child').remove() 제거되지만 다음 요소는 나타나지 않습니다. 개발자 콘솔에서 DOM 노드를 클릭했을 때만 나타나는 것 같습니다 (Ctrl + Shift + i in chrome).

어떤 생각으로 브라우저가 CSS 규칙을 평가하도록 할 것입니까?

업데이트 이것은 jsFiddle test case입니다. 버튼을 클릭하면 "0"이 표시되고 다른 번호는 없으며 "1", "2"등이됩니다.

결론 : 이상하게도, remove() 전에 fadeOut (400)을 제거하면 이상하게 작동합니다.

출처

2012-04-12 lukas.pukenis

당신이 테스트 케이스를 재현 할 수는? 나는 브라우저가 이미 DOM이 바뀔 때마다 CSS를 다시 평가할 것이라고 확신한다. – BoltClock

@Sven Bieder :': first-child'는 그 내용이 아닌 요소를 봅니다. 첫 번째'.hidden' 요소는 여전히 첫 번째 자식입니다 (이 모든 요소에 클래스가 있다고 가정).이를 제거하면 두 번째 요소가 첫 번째 요소가됩니다. – BoltClock

http://jsfiddle.net/umt3q/ 잘 작동합니다. – jAndy

는 CSS pseudoclass를 사용해보십시오 : 최초의 형 대신 : 첫째 자녀 여기

작업 jsFiddle에 예입니다 : http://jsfiddle.net/jukDU/3/

출처

2012-04-12 13:59:19 gabitzish

지옥 예,이 작품! 감사! –

왜': first-of-type'이 작동하지만 Chrome에서는'first-child'가 아닌가 ... 이상하게도 버그의 또 다른 것이되어야합니다. – BoltClock

@ BoltClock 's Unicorn 정말이 버그는 아니지만 재부팅 된 jsFiddle도 첫 아이와 함께 나를 위해 작동하지 않습니다. 내 인생을 통해 첫 번째 - 아이가 지금까지 날을 실패하지 않았다 :) –

먼저 다음 항목을 표시하고 제거하십시오.

$('.hidden:first-child').next().show(); 
$('.hidden:first-child').remove();

출처

2012-04-12 13:56:45

그러나 좋은 대답은 조금 부 자연스러운 것 같습니다 –

요소 : 첫 번째 자식 강제 재평가

답변

관련 문제