2013-06-12 10 views
0

: https://weargustin.com/store?filter=alljQuery를 n 번째 자식 혼란이 페이지에서

이 선택의 첫 번째 요소는 이유 :

$('div.funded.product:nth-child(3n)') 

$('div.funded.product') 

의 두 번째 요소?!

+0

대신'(3n + 3)'을 사용해보십시오. (http://css-tricks.com/how-nth-child-works/) – Aaron

+0

나는'(3n + 1)'을 의미한다고 생각하지만'3n'이 왜 작동하지 않는지 설명하지는 않습니다. 나는 당황 스럽다.'(3n)'은 0,3,6,9 등과 같아야하고, 0은 일치하지 않는다. – Nucleon

+0

내가 할 첫 번째 일은 실제로 두 번째 자식을 선택하고, 브라우저에서 DOM을 검사 할 때 다른 자식 노드가 없는지 확인하는 것입니다. n 번째 자식이 익명의 텍스트 노드를 계산한다는 것은 확실합니다 (확실하지는 않습니다). 그렇게되면 빈 공간으로 인해 계산이 지연 될 수 있습니다. – Jerry

답변

3

문제 :nth-of-type은 n 번째 자녀는 모든 아이들을 통해 루프와 선택에 그들을 테스트 것입니다 참조하십시오. 선택기를 사용하지 않고 일치하는 루프를 반복합니다. 그래서 PSL이 말했듯이 다른 형제 자매는 모든 것을 던지고 있습니다.

는 여기를 무너 뜨리는 예를 들어 바이올린의 : 두 번째 스팬 정말 선택, span 일치 div의 셋째 아이 때문에 http://jsfiddle.net/Ga5Jq/

<div> 
     <p>test</p> 
     <span>1</span> 
     <span>2</span> 
     <span>3</span> 
</div> 


$(function() { 
    alert($("div span:nth-child(3n)").html()); 
}); 

위의 코드는 2 알려줍니다.

+0

Yup을'alert ($ ("div span : nth-of-type (3n)") .html());로 변경하고 올바른 것을 경고합니다. – PSL

+0

Nucleon에게 감사드립니다! –

2

nth-child 대신 nth-of-type을 사용하려고 시도하므로 다른 유형의 이외의 다른 형제가 있으므로이 유형의 모든 3 분의 1을 선택하려고합니다. 예를 들어 div .product.funding도 같은 부모의 하위로 들어옵니다.

$('div.funded.product:nth-of-type(3n+1)') 

관련 문제