.before() /. after() 요소가 자동으로 닫히지 않고

Question

이것이 내가하려는 일입니다.

저는 XML 파일을 호출하고 파일에서 내용을 둘러싼 div를 많이 만듭니다. 내가하고 싶은 일은 15div마다 div를 추가하는 것입니다. div에는 클래스 "item"이 있습니다. 항목은 "컨테이너"라는 div에 포함됩니다.

먼저 컨테이너의 첫 번째 div 앞에 <div>을 추가하려고합니다. 그 때 나는 열 여섯의 div보고 닫는 </div>을 추가하려고하고 나는 또 다른 <div> 열고 나는 내 문제가

$(".container .item:first-child").before('<div class="inner-container">'); 

$(".container .item:nth-child(16)").before('</div><div class="inner-container">'); 

$(".container .item:last-child").after('</div>'); 

않을까 "항목"후 폐쇄 </div>을 추가하여 마지막을 닫으려고 div가 자동으로 닫혀서 나머지 "항목"과 함께 빈 div로 표시됩니다.

jQuery 일지 또는 브라우저에서 수행 중인지 확실하지 않습니다. 하지만이 일을하려면 어떻게해야합니까?

왼쪽에서 오른쪽으로 컨테이너를 스크롤하기 때문에이 작업을 수행하고 있습니다.

Answer 1

그런 식으로 작동해야합니다. 모든 요소를 ​​가져 와서 15 개를 감싸십시오. 그런 다음 다음 15 개의 요소를 가져 와서 포장하십시오. 그리고 요소가 남아 있지 않을 때까지 계속 켜져 있습니다.

var allElements = $('.container .item'), 
    WRAP_BY = 15; 
for (var i = 0; i < allElements.length; i += WRAP_BY) { 
    //first loop, elements 0 : 15, next loop elements 15:30 and so on 
    allElements.slice(i, i + WRAP_BY).wrapAll('<div class="inner-container" />'); 
} 

Answer 2

원하는 그룹을 선택하고 wrapAll()^(docs) 메서드를 사용하여 컨테이너로 래핑해야합니다.

예 :http://jsfiddle.net/FvC6A/

$(".container .item").slice(0,15).wrapAll('<div class="inner-container"></div>') 
       .end().slice(15).wrapAll('<div class="inner-container"></div>'); 

... 또는 루프에, 당신은이 작업을 수행 할 수 있습니다 :

예 :http://jsfiddle.net/FvC6A/1/

$(".container .item:nth-child(15n+1)").each(function(i){ 
    $(this).nextAll('.item').andSelf() 
      .slice(0,15).wrapAll('<div class="inner-container"></div>'); 
}); 

... 또는이 :

,691,363,210

예 :http://jsfiddle.net/FvC6A/2/

var items = $(".container .item"); 

while(items[0]) { 
    items = items.slice(0,15).wrapAll('<div class="inner-container"></div>') 
                   .end().slice(15); 
} 

...하거나 :

예 :http://jsfiddle.net/FvC6A/3/

$(".container .item").each(function(i) { 
    if(!(i % 15)) 
     $(this).nextAll().andSelf().slice(0,15).wrapAll('<div class="inner-container"></div>'); 
}); 

...하거나 :

예 :http://jsfiddle.net/FvC6A/4/

var items = $(".container .item"),i=0; 

while(i < items.length) { 
    items.slice(i,i+=15).wrapAll('<div class="inner-container"></div>'); 
}