중첩 된 경우에도 자식 요소를 차례로 선택하십시오.

Question

설명 : 외부 응용 프로그램에서 생성 된 HTML이 있으며 불행히도 변경할 수 없습니다. 그것은 기본적으로 자식 요소의 많은 컨테이너 사업부를 포함, 느릅 나무의 일부는 다음과 같이 중첩 :

<div class="parent"> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
    <div> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
    </div> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
</div>

예상 결과 : 나는 CSS3에게 애니메이션 및 를 사용하려고 해요 애니메이션 지연을 사용하면 모든 목록 요소가 차례로 약간의 지연으로 빠르게 사라지는 멋진 효과를 낼 수 있습니다. CSS는 다음과 같이 진행됩니다

.container .child { 
 
    animation: FadeIn 1s ease-out; 
 
} 
 
.container .child:nth-child(1){ 
 
    animation-delay: 0.2s 
 
} 
 
.container .child:nth-child(2){ 
 
    animation-delay: 0.4s 
 
} 
 
.container .child:nth-child(3){ 
 
    animation-delay: 0.6s 
 
} 
 
.container .child:nth-child(....){ 
 
    animation-delay: 0.8s 
 
}

문제 : 모든 요소 .container의 DIV 내에서 직접하는 경우 이해다시피가, 애니메이션은 잘 작동합니다. 그러나 일부 div가 중첩되면 애니메이션이 순서대로 중단됩니다. 추가 DIV에 중첩 되더라도 어떻게 든 모든 .child 요소를 하나씩 선택할 수 있습니까?

편집 : 모든 혼란을 피하기 위해 - 나는 JS - 순수한 CSS 방식없이이 목표를 달성하려고 노력 중입니다!

미리 감사드립니다.

Answer 1

나는 당신이 찾고있는 것이 .children()이 아니라고 생각합니다. .child()입니다. 또한 다양한 JQuery 선택기를 사용하여 선택할 자식을 지정할 수 있습니다. JQuery documentation on the children method 및 documentation for JQuery Selectors을 참조하십시오.