숨겨진 자녀 중 n 번째 자녀

Question

나는 숨겨져 있거나 숨겨져 있지 않은 요소 (형제)가 있습니다 ("숨김"적용됨).

색인을 기반으로 요소 중 하나를 선택하여 : nth-child 의사 클래스를 사용하려고합니다.

그러나 모든 요소의 n 번째 자식이 아닌 표시 자식을 선택하고 싶습니다. 그래서 같은 시도 :

$('.product-cell'):not('is-hidden'):nth-child(2); 

하지만 그건 작동하지 않습니다, 내 구문을 엉망으로하거나이 같은 의사 클래스를 스택하는 것은 불가능했다? 이 문제를 해결하려면 어떻게해야합니까?

Answer 1

하지만 그건 작동하지 않습니다, 내 구문을 엉망으로하거나이 같은 의사 클래스를 스택하는 것은 불가능했다? 이 문제를 해결하려면 어떻게해야합니까?

둘 다 실제로.

콜론 구문을 사용하는 경우 모든 선택기를 단일 문자열에 넣어야합니다. 여러 메서드 호출을 사용하려는 경우 콜론 : 대신 기간이 .입니다.

또한, :nth-child()는 항상 숨겨져 있는지 여부에 관계없이 부모의 n 번째 자녀 나이 같은 :nth-child() 대신 :eq()을 사용할 필요가 그래서 특정 클래스 등이있는 요소를 선택합니다 :

// :eq() is zero-indexed so :eq(1) selects the second match 
$('.product-cell:not(.is-hidden):eq(1)') 

Answer 2

먼저 not 문에 클래스 선택기가 누락되었지만 jQuery의 not() 및 nth-child() 선택기는 초기 선택기의 일부로 설계되었습니다.

$('.product-cell:not(.is-hidden):nth-child(2)') 

Answer 3

나의 올바른 이해한다면,

당신은하지 .is-hidden 클래스의 마지막 자식에 불과하다 .is-hidden라는 클래스가없는 nth child 찾고 있습니다.

당신의 HTML이 같다고 가정 : -

<ul class='product-cell'> 
    <li>Glen</li> 
    <li class='is-hidden'>Tane</li> 
    <li>Ralph</li> 
    <li class='is-hidden'>David</li> 
    <li class='is-hidden'>David111</li> 
    <li>David22</li> 
</ul> 

가 마지막 자식을 얻으려면, 아래 JQuery와있다

$('.product-cell li[not(.is-hidden)]:last-child').text() 

결과 :

David22