3

Estoy probando en jQuery la función para cambiar varios elementos en bloque (each), pero no encuentro el error, no me cambia la clase de los td.

<!DOCTYPE html>
<html>
<head>
<title>Cuadrícula en Bootstrap</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>

<body>
<div id="miElemento">

</div>
<form action="miPagina.php" id="miFormulario" target="">
<input type="text" id="miCampo" value="Texto del campo"></input>
</form>
<a class="miEnlace" href="#" title="">Enlace</a>
<table class="table table-bordered" id="miTabla">
   <tr>
  <td class="">Hola</td>
  <td>Hola</td>
 </tr>
 <tr>
  <td>Hola</td>
  <td>Hola</td>
</tr>
<tr>
  <td>Hola</td>
  <td>Hola</td>
</tr>
</table>
<script type="text/javascript">
$(document).ready(function() {

$("#miTabla td").each(function(element){
    element.addClass("miNuevoEstilo");
});
});
</script>
</body>
</html>

4 respuestas 4

2

Según la documentación de jQuery, .each() puede recibir dos parámetros: el primero es el index del elemento en el orden de la iteración (un entero) y el segundo es el elemento sobre el cual se itera en ese momento.

Se puede hacer de dos formas:

  1. Sin pasarle ningún parámetro y utilizando this para referirse al elemento actual:

    $("#miTabla td").each(function(){
      $(this).addClass("miNuevoEstilo");
    });
    
  2. Pasar los dos parámetros y utilizar el segundo parámetro, algo similar a lo que intentaste:

    $("#miTabla td").each(function(index, element){
      element.addClass("miNuevoEstilo");
    });
    
0

$.each no funciona igual que le forEach de JavaScript. Para acceder al elemento dentro del each puedes hacer $(this):

$("#miTabla td").each(function(){
    $(this).addClass("miNuevoEstilo");
});

Al final el código quedaría así:

<!DOCTYPE html>
<html>
<head>
<title>Cuadrícula en Bootstrap</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>

<body>
<div id="miElemento">

</div>
<form action="miPagina.php" id="miFormulario" target="">
<input type="text" id="miCampo" value="Texto del campo"></input>
</form>
<a class="miEnlace" href="#" title="">Enlace</a>
<table class="table table-bordered" id="miTabla">
   <tr>
  <td class="">Hola</td>
  <td>Hola</td>
 </tr>
 <tr>
  <td>Hola</td>
  <td>Hola</td>
</tr>
<tr>
  <td>Hola</td>
  <td>Hola</td>
</tr>
</table>
<script type="text/javascript">
$(document).ready(function() {

$("#miTabla td").each(function(){
    $(this).addClass("miNuevoEstilo");
});
});
</script>
</body>
</html>
0

Esta no es una respuesta directa, pero cabe destacar que addClass aplica el estilo a todos los elementos que retorne la query. Por lo tanto no seria necesario usar each ya que lo hace internamente.

Fíjate este ejemplo:

$("#miTabla td").addClass("miNuevoEstilo");
.miNuevoEstilo {
  color: red;  
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered" id="miTabla">
   <tr>
  <td class="">Hola</td>
  <td>Hola</td>
 </tr>
 <tr>
  <td>Hola</td>
  <td>Hola</td>
</tr>
<tr>
  <td>Hola</td>
  <td>Hola</td>
</tr>
</table>

0

Como aporte dejo otra solución sin utilizar jQuery que bajo mi punto de vista es mucho más elegante (y de paso nos ahorramos la carga de los 94KB de la versión para producción de jQuery).

const tds = document.querySelectorAll('#miTabla td')
[].forEach.call(tds, td => {
  td.addClass('tuNuevoEstilo') 
})

Y una versión más al estilo ES6 utilizando spread operator podría ser algo así:

[...document.querySelectorAll('#miTabla td')].forEach(td => {
  td.addClass('tuNuevoEstilo') 
})

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.