첫 번째 X DIV를 선택하는 방법

Question

예 : 8 행의 DIV (이미지 포함). 내 문제는 X (이 숫자는 슬라이더에 설정 됨) DIV 이후에 새 행을 가져올 수 있기를 원한다는 것입니다. 이 8 DIV의 경우 예를 들어 새 행을 추가하고 싶습니다. 4 DIV입니다.

같은 내 DIV의 모습 :

<div id="table-cell-x" class="table-cells"><img src="...."></div> 

여기서 x = 1 -> 8

내가 원하는 결과 (8 개 된 DIV 및 X 4로 설정의 경우)입니다 :

<div class="table-rows"> 
    <div id="table-cell-1" class="table-cells">div1</div> 
    <div id="table-cell-2" class="table-cells">div2</div> 
    <div id="table-cell-3" class="table-cells">div3</div> 
    <div id="table-cell-4" class="table-cells">div4</div> 
</div> 

<div class="table-rows"> 
    <div id="table-cell-5" class="table-cells">div5</div> 
    <div id="table-cell-6" class="table-cells">div6</div> 
    <div id="table-cell-7" class="table-cells">div7</div> 
    <div id="table-cell-8" class="table-cells">div8</div> 
</div> 

나는 그것을 시도 :

$('div.table-cells':lt(4)).append('<div class="table-row"></div>'); 
$('div.table-cells':gt(4)).append('<div class="table-row"></div>'); 

그러나 즉, 난 당신이 각 4 div.table-cells 내부 포장됩니다 원하는 것을 이해하게 무엇 ....이 문제 좀 도와주십시오 수 있습니다 ........

감사합니다, 존

Answer 1

를 작동하지 않았다 컨테이너 table-row div. 예 다음 아래와 같이 할 경우

가 : -

$(document).ready(function(){ 
 
    var $child_div = $("div.table-cells"); 
 
    for (var i = 0; i < $child_div.length; i += 4) { 
 
     var $parent_div = $("<div/>", { 
 
      class: 'table-row' 
 
     }); 
 
     $child_div.slice(i, i +4).wrapAll($parent_div); 
 
    } 
 
});

.table-row{ 
 
background:grey; 
 
margin-bottom:20px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="table-cell-1" class="table-cells">div1</div> 
 
<div id="table-cell-2" class="table-cells">div2</div> 
 
<div id="table-cell-3" class="table-cells">div3</div> 
 
<div id="table-cell-4" class="table-cells">div4</div> 
 
<div id="table-cell-5" class="table-cells">div5</div> 
 
<div id="table-cell-6" class="table-cells">div6</div> 
 
<div id="table-cell-7" class="table-cells">div7</div> 
 
<div id="table-cell-8" class="table-cells">div8</div>

참조 : - 나는 그것을 알고있는 것처럼

.wrapAll() | jQuery API Documentation