Me gustaría dividir la lista de elementos en grupos de 4, excepto uno antes del último que debe contener solo 2 elementos.
xxxxxxx
xxxxxxx
xxxxxx
xxxxxx
Esto se dividirá en grupos de 4 el.:
for ( var i = 0; i < $(".el").length; i+=4 ) { $(".el").slice(i, i + 4).wrapAll('<div class="group">'); }https://jsfiddle.net/p13rcd1c/
¿Cuál es un enfoque para hacer que un grupo contenga solo 2 elementos?
Al calcular el número de grupos de antemano, la porción podría adaptarse si el índice de 'grupo' es el penúltimo:
var els = $(".el"),grp = 4, cnt = Math.ceil(els.length/grp), rem = els.length % grp, ind = 0; for(var i = 0; i <= cnt;i++) { els.slice(ind, ind += (i==cnt-2 ? rem : grp)).wrapAll('<div class="group">'); }editar : una versión alternativa si la cantidad total puede desviarse del llenado. Esta versión llena el último grupo con 4, pero llena el anterior con el resto. (Si esa no es la intención, y el código original era el objetivo requerido, el violín vinculado aún contiene el original)
var els = $(".el"),grp = 4, cnt = Math.ceil(els.length/grp), rem = els.length % grp, ind = 0; for(var i = 0; i <= cnt;i++) { els.slice(ind, ind += (i==cnt-2 ? rem : grp)).wrapAll('<div class="group">'); } * { margin: 0; padding: 0} body { margin: 10px } .el { width: 20px; height: 10px; margin-bottom: 2px; background-color: blue; } .group { float: left; margin-left: 2px; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="el"></div> <div class="el"></div> <div class="el"></div> <div class="el"></div> <div class="el"></div> <div class="el"></div> <div class="el"></div> <div class="el"></div> <div class="el"></div> <div class="el"></div> <div class="el"></div> <div class="el"></div> <div class="el"></div> <div class="el"></div> <div class="el"></div> <div class="el"></div> <div class="el"></div> <div class="el"></div> <div class="el"></div> <div class="el"></div> <div class="el"></div> <div class="el"></div> <div class="el"></div> <div class="el"></div> <div class="el"></div> <div class="el"></div>