플로팅 요소 행의 마지막 요소 다음에 요소 추가

Question

플로팅 요소의 동적 번호를 포함 할 수있는 래퍼 인 다음 마크 업이 있습니다. 3 개 요소 최대가 나란히 배치 될 수있다 (= 1 행)

<div class="wrapper clearfix"> 
    <div class="floatLeft"></div> 
    <div class="floatLeft"></div> 
    <div class="floatLeft"></div> 
    <div class="floatLeft"></div> 
    <div class="floatLeft"></div> 
    <div class="floatLeft"></div> 
    <div class="floatLeft"></div> 
</div> 

플로팅 요소

새로운 요소는 행 클릭 된에게의 마지막 요소 이후에 추가되어야 클릭 이벤트 (jQuery를)이 요소가 "있음"입니다. 그래서 예를 들어 나는 1. 요소를 클릭하면 내가 withthis 결국 :

<div class="wrapper clearfix"> 
    <div class="floatLeft"></div> 
    <div class="floatLeft"></div> 
    <div class="floatLeft"></div> 
    <div class="addElement"></div> 
    <div class="floatLeft"></div> 
    <div class="floatLeft"></div> 
    <div class="floatLeft"></div> 
    <div class="floatLeft"></div> 
</div> 

또는 내가 5 요소를 클릭하면 나는 등

<div class="wrapper clearfix"> 
    <div class="floatLeft"></div> 
    <div class="floatLeft"></div> 
    <div class="floatLeft"></div> 
    <div class="floatLeft"></div> 
    <div class="floatLeft"></div> 
    <div class="floatLeft"></div> 
    <div class="addElement"></div> 
    <div class="floatLeft"></div> 
</div> 

과를 얻을.

nth-child 선택기를 사용하여 생각했지만 제대로 작동하지 않습니다.

편집 : 래퍼에 3 개의 모든 .floatLeft 요소를 래핑하지 않으려합니다.

클릭에

Answer 1

이 할 -이 7 .floatLeft 위의 예에서 마지막 후를 추가 할 ----->http://jsfiddle.net/xQ7hh/2/

Answer 2

$('.floatLeft').click(function(){ 
    $(this).after('<div class="addElement"></div>'); 
}); 

And the jsFidde