Recorrer todas las entradas de un selector con jQuery

Logo de jQueryHay 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

div {
width: 150px;
height: 150px;
float: left;
background: red;
margin: 5px;
}

JAVASCRIPT

$(document).ready(function() {
$(«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).

ejemplo de each con jquery

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

  1. 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’];
    }
    });
    });

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.