Hay veces que queremos realizar una función determinada sobre varios objetos HTML, por ejemplo, sobre todos los inputs de una determinada página, sobre una tabla, sobre los elementos de una lista, o simplemente una serie de divs. Vamos a ver cómo realizar esta función con jQuery.
Para empezar, debemos tener en cuenta que han de tener algún atributo o patrón común para llamarlos a todos, y que no lo tengan el resto de elementos sobre los que no debemos hacer la función (igual hacemos siempre, en realidad no es nada nuevo), por ejemplo:
Tengo 5 DIVs sobre los que quiero realizar un cambio de color de fondo, pero solo a los pares, dejando al resto sin afectar.
Tendríamos algo así:
HTML
[…]
[…]
CSS
width: 150px;
height: 150px;
float: left;
background: red;
margin: 5px;
}
JAVASCRIPT
$(«div»).each(function(indice) {
if (indice%2 == 0)
$(this).css(«background», «green»);
});
});
De este modo tendríamos en un principio, según vemos en el CSS, que todos los DIVs son rojos, pero tal y como hemos realizado la función each, solo los pares aparecen de color verde (el índice empieza en 0).
Sin duda es una función muy útil en muchos aspectos, y que podemos usar como hemos dicho en operaciones sobre formularios, tablas, listas, o también en plugins como datepicker para operaciones sobre los días, con el plugin de Google Maps sobre los lugares, o en cualquier situación en la que necesitemos recorrer todas las apariciones de un selector para realizar una determinada función.
1 comentario
Hola me gustaría saber como implementar eso en un datapicker, te pongo un ejemplo de mi caso por si me puedes ayudar.
Quiero que mi calendario me marque 2 días y 3 sin marcar así durante todo el calendario, ya que es un programa de turnos de trabajo, lo que he conseguido hacer es poder marcar algún día ya preprogramado y por eso me gustaria aplicar tu funcion a mi datapicker. te pongo mi programacion hasta ahora:
$(function() {
var events = [’15-1-2014′, ’02-5-2014′, ’17-6-2014′, ’17-5-2014′];
//Array para dar formato en español
$.datepicker.regional[‘es’] =
{
closeText: ‘Cerrar’,
prevText: ‘Previo’,
nextText: ‘Próximo’,
monthNames: [‘Enero’,’Febrero’,’Marzo’,’Abril’,’Mayo’,’Junio’,
‘Julio’,’Agosto’,’Septiembre’,’Octubre’,’Noviembre’,’Diciembre’],
monthNamesShort: [‘Ene’,’Feb’,’Mar’,’Abr’,’May’,’Jun’,
‘Jul’,’Ago’,’Sep’,’Oct’,’Nov’,’Dic’],
monthStatus: ‘Ver otro mes’, yearStatus: ‘Ver otro año’,
dayNames: [‘Domingo’,’Lunes’,’Martes’,’Miércoles’,’Jueves’,’Viernes’,’Sábado’],
dayNamesShort: [‘Dom’,’Lun’,’Mar’,’Mie’,’Jue’,’Vie’,’Sáb’],
dayNamesMin: [‘Do’,’Lu’,’Ma’,’Mi’,’Ju’,’Vi’,’Sa’],
dateFormat: ‘dd/mm/yy’, firstDay: 1,
initStatus: ‘Selecciona la fecha’, isRTL: false};
$.datepicker.setDefaults($.datepicker.regional[‘es’]);
$(«#datepicker»).datepicker({
beforeShowDay: function(date) {
var current = $.datepicker.formatDate(‘dd-m-yy’, date);
return jQuery.inArray(current, events) == -1 ? [true, »] : [true, ‘ui-state-hover’, ‘ui-state-highlight’];
}
});
});