변수의 n 번째 자식을 li 태그로 가득 채우십시오.

Question

변수가 있습니다.이 변수를 $ listObjects라고합시다. 그것의 데이터로

<li>Data Here 1</li> 
<li>Data Here 2</li> 
<li>Data Here 3</li> 
<li>Data Here 4</li> 

내가 생각할 수있는 모든 방법을 시도했습니다 .... 다음에하고 목록 태그의 n 번째의 아이를 얻는 방법을 찾을 수 없습니다. 이것이 가능한가? 기본적으로 $ listObjects 변수에서 n 번째 자식 (3n)을 사용하려고합니다.

위의 방법이 가능하지 않은 경우, $하고 ListObjects 변수과 같이 채워되고 ...

var $listObjects = $data.find('li[data-type=' + $filterType + ']'); 

가 그 라인에 n 번째 자녀 (3N)를 추가 할 수 있을까요?

Answer 1

사용 filter :

의 선택과 일치하는 일치 요소의 세트를 줄이거 나 기능의 테스트를 통과.

그래서 그것을 수행해야합니다

$listObjects.filter(':nth-child(3n)') 

을 당신이 다음이 포함될 수 있습니다 무엇에 대한 :nth-child을 $listObjects이 필요하지 않은 경우 원래 find :

$data.find('li[data-type=' + $filterType + ']:nth-child(3n)'); 

---

우리가 조금씩 진행하고있는 것을 분명히 해봅시다. 이 HTML을 감안할 때 우리가 $('li[data-id]')을 말한다면

<ul> 
    <li data-id="a">One</li> 
    <li>Two</li> 
    <li data-id="a">Three</li> 
    <li data-id="a">Four</li> 
    <li data-id="a">Five</li> 
    <li data-id="a">Six</li> 
    <li data-id="a">Seven</li> 
</ul> 

을 우리는 명백한 이유 한, 세, 네, 다섯, 여섯및 세븐를 얻을 수 있습니다. 당신은 아마 네 및 세븐를 얻을 것으로 예상 할 때

우리가 $('li[data-id]').filter(':nth-child(3n)')을 말한다면, 우리는 세 및 여섯를 얻을 수 있습니다. 여기서 어떻게됩니까? :nth-child 셀렉터가 [data-id]과 일치하는 셀이 아닌 <ul>의 모든 하위 셀에 적용됩니다. 훌륭한 매뉴얼에서 :

제공된 선택기는 각 요소에 대해 테스트됩니다. 선택기와 일치하는 모든 요소가 결과에 포함됩니다.

그래서이 동작은 다소 혼란 스럽지만 사양이 사물의 상호 작용 방식에 대해 더 명확하게 표현할 수있을지라도 사양과 일치합니다.

우리가 $('li[data-id]:nth-child(3n)')을 말한다면

는 우리는 (예상?) 얻을 네 세븐 , $('li[data-id]')의 즉 모든 세 번째 요소입니다.

그리고 마지막으로, 우리는이 말을 할 수

$.grep($('li[data-id]'), function(e, i) { return (i + 1) % 3 == 0 })); 

이 nth-child는 CSS 셀렉터 따라서 (1) 기반의 테스트 기능에 따라서 (i + 1) 것을 기억하십시오. 그러면 우리는 세 번째 요소를 모두 다시 얻게 될 것입니다. 네 번 및 세븐. $.grep은 DOM 요소의 일반 배열을 제공하므로 jQuery 기반 버전 인 경우 $()에 해당 배열을 래핑하고자합니다.

데모 : http://jsfiddle.net/fw4xr/

---

요약 : filter 당신이 원하는 것을 할 수 있지만, 아마도이 원래의 선택에 :nth-child(3n)를 추가하지 않을 수 있습니다. 또는 $.grep을 사용하여 관심있는 $listObjects 배열의 부분을 잡을 수 있습니다. 그리고 filter의 동작은 약간 혼란 스럽습니다.