Wrap 'n' number of elements demo

by Akram kamal

HTML

<h1>Wrap 'n' number of elements demo</h1>

<hr/>

<h2>Cointainer #1</h2>

<div id="parent1" class="parent"> <span>10</span>
 <span>11</span>
 <span>12</span>
 <span>13</span>
 <span>14</span>
 <span>15</span>
 <span>16</span>
 <span>17</span>
 <span>18</span>
 <span>19</span>
 <span>20</span>
 <span>21</span>

</div>
<br/>
 <h2>Cointainer #2</h2>

<div id="parent2" class="parent"> 
     <span>10</span>
     <span>11</span>
     <span>12</span>
     <span>13</span>
     <span>14</span>
     <span>15</span>
     <span>16</span>
     <span>17</span>
     <span>18</span>
     <span>19</span>
     <span>20</span>
     <span>21</span>
</div>

CSS

body {
    font-family:"Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif";
    font-size: 70%;
}
.parent {
    padding:8px;
    margin:8px;
    border:2px solid #ddd;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    -khtml-border-radius: 8px;
}
span {
    padding:5px;
    margin:5px;
    border:2px solid #eee;
    display:inline-block;
}
.myClass {
    padding:5px;
    margin:4px;
    border:1px solid green;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    -khtml-border-radius: 8px;
}

JavaScript

// Get all the span's inside parent2
var $span = $("#parent2 span");

// Loop through all the spans
for (var i = 0; i < $span.length; i += 6) {
    
    // Create dynamic div
    var $div = $("<div/>", {
        class: 'myClass'
    });
    
    // Wrap all the spans inside the div
    $span.slice(i, i + 6).wrapAll($div);
}