'this'의 대상 형제, n 번째 자식과

Question

클릭 한 항목의 n 번째 형제를 대상으로하려고합니다. 기본적으로 n 번째 (4n + 4) 인 다음 요소를 대상으로 새 요소를 삽입 할 수 있도록하려면 "새 줄"과 비슷합니다.

$("li").click(function() { 
    $(this).next('li:nth-child(4n+4)').after('<li class="full">new full width item</li>'); 
}); 

작동하지 않는 .next ('li : nth-child (4n + 4)')입니다.

그것은 설명하기 조금 어려운,하지만 당신은 내가 여기에 무슨 뜻인지 이해할 수있을 것이다 : http://jsfiddle.net/hYE7e/1/

Answer 1

이것은 실제로 잘 작동하지만 li이 4n + 4 자식 인 경우에만 after()이 실행됩니다. 즉, 처음부터 오른쪽에 3 또는을 클릭하면 제대로 작동합니다. 3을 클릭하면 7 번째가 작동을 멈추고 7 번째가 이제는 8 번째 요소가되기 때문에 6 번째 대신 작동합니다.

약간 서투른 갱신 : http://jsfiddle.net/hYE7e/3/

$("ul li:nth-child(4n)").addClass("last-in-line"); 
$("li").click(function() { 
    $(this).nextAll("li.last-in-line").andSelf(".last-in-line").filter(":first").after('<li class="full">new full width item</li>'); 
}); 

andSelf(".last-in-line").filter(":first") 요소가 작동합니다 4, 8, 등의 해당 클릭을 보장하기 위해.

는

업데이트 : 댓글 토론 후

, 나는 내가 생각 : 사용자 정의 필터와 http://jsfiddle.net/hYE7e/7/

:

$("li").click(function() { 
    var myIndex = $("li:not(.full)").index($(this)); // Save our position in a row 
    $(this) 
     .nextAll("li:not(.full)") 
     .andSelf() 
     .filter(function(index){ // Get 4n'th lis from 'not(.full)' set 
      return (index + myIndex + 1) % 4 == 0; 
     }) 
     .add("li:last") // Make sure last rows will work 
     .first()   // Only add 'li' after first matching element 
     .after('<li class="full">new full width item</li>'); 
}); 

Answer 2

난 당신이 모든 ucoming 형제뿐만 아니라 다음 하나, 권리를 필터링 할 생각? 아마도 이것은 당신이 원하는 것입니다 :

$(this).nextAll('li:nth-child(4n+4)').first().after('<li class="full">new full width item</li>'); 

내 updated Fiddle here을 참조하십시오.