Envuelva cada 3 divs en un div
¿Es posible utilizar nth-childselectores para envolver 3 divs usando .wrapAll? Parece que no puedo resolver la ecuación correcta.
entonces...
<div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
se convierte...
<div>
<div class="new">
<div></div>
<div></div>
<div></div>
</div>
<div class="new">
<div></div>
<div></div>
<div></div>
</div>
</div>
Puedes hacerlo con .slice(), así:
var divs = $("div > div");
for(var i = 0; i < divs.length; i+=3) {
divs.slice(i, i+3).wrapAll("<div class='new'></div>");
}
Puede probar una demostración aquí , todo lo que estamos haciendo aquí es obtener los elementos que desea envolver y recorrerlos en bucle, hacer un .wrapAll()lote de 3 y luego pasar a los 3 siguientes, etc. Envolverá 3 a la vez y sin embargo, quedan muchos al final, por ejemplo, 3, 3, 3, 2 si ese es el caso.
He escrito una función fragmentada genérica que hace que esto sea bastante fácil de hacer:
$.fn.chunk = function(size) {
var arr = [];
for (var i = 0; i < this.length; i += size) {
arr.push(this.slice(i, i + size));
}
return this.pushStack(arr, "chunk", size);
}
$("div > div").chunk(3).wrap('<div class="new"></div>');
Mostrar fragmento de código
El complemento
$(function() {
$.fn.EveryWhat = function(arg1) {
var arr = [];
if($.isNumeric(arg1)) {
$.each(this, function(idx, item) {
var newNum = idx + 1;
if(newNum%arg1 == 0)
arr.push(item);
});
}
return this.pushStack(arr, "EveryWhat", "");
}
});
Cómo usarlo.
Llame EveryWhat()al elemento e ingrese un número para cada elemento que le gustaría recolectar.
$("div").EveryWhat(2).wrapInner('<div class="new" />');
Las citas de Wrapinner deben tener el formato adecuado <div class="new" />con una clase y una etiqueta de cierre. Stackoverflow me impide mostrar cómo se ve, pero aquí hay un enlace de un div que se cierra automáticamente.
Como debería verse
Eso ajustará todos los demás números que haya especificado. Estoy usando jquery 1.8.2. Así que recuerda usar el selector de llamadas EveryWhat(3)y un número para cada vez. Por supuesto, poniéndolo al final de la página o envolviéndolo en un
$(document).ready(function() {
//place above code here
});
Podrías usar cada enésimo y luego .wrapInner('<div class="new" />')para obtener los mismos resultados.
Aquí hay una versión más utilizable de la de Nick anterior:
window.WrapMatch = function(sel, count, className){
for(var i = 0; i < sel.length; i+=count) {
sel.slice(i, i+count).wrapAll('<div class="'+className+'" />');
}
}
Usarías esto como:
var ele = $('#menu > ul > li');
window.WrapMatch(ele, 5, 'new-class-name');
La ventana debe ser reemplazada con su espacio de nombres Handlers, por supuesto.
Actualizado: una versión ligeramente mejor que aprovecha jQuery
(function($){
$.fn.wrapMatch = function(count, className) {
var length = this.length;
for(var i = 0; i < length ; i+=count) {
this.slice(i, i+count).wrapAll('<div '+((typeof className == 'string')?'class="'+className+'"':'')+'/>');
}
return this;
};
})(jQuery);
Usar como:
$('.list-parent li').wrapMatch(5,'newclass');
El segundo parámetro para el nombre del contenedor es opcional.
