[SOLUCIONADO] funciones con .attr() de Jquery

wilmer30 · #1 (**permalink**) 26/04/2015, 08:45

Hola,

Me encuentro en la etapa de apredizaje y me topé con este código:

Código Javascript:

Ver original<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>attr demo</title>
  <style>
  div {
    color: blue;
  }
  span {
    color: red;
  }
  b {
    font-weight: bolder;
  }
  </style>
  <script src="jquery/jquery-1.11.2.js"></script>
</head>
<body>
 
<div>Zero-th <span></span></div>
<div>First <span></span></div>
<div>Second <span></span></div>
 
<script>
$( "div" )
  .attr( "id", function( arr ) {
    return "div-id" + arr;
  })
  .each(function() {
    $( "span", this ).html( "(id = '<b>" + this.id + "</b>')" );
});
</script>
 
</body>
</html>

y el resultado es:

Código HTML:

Ver originalZero-th (id = 'div-id0')
First (id = 'div-id1')
Second (id = 'div-id2')

Se ve que div-idx se incrementa, alguien por favor podría explicarme como es posbile esto con dos funciones encadenadas?

Gracias

PHPeros · #2 (**permalink**) 26/04/2015, 10:19

Lo explico resumidamente:

Primero, a cada elemento div del documento le añade un atributo ID mediante una función. Dicha función toma como valor del primer parámetro el index del elemento actual dentro del conjunto de divs, empezando desde 0. De esta forma se le asigna a cada contenedor un ID diferente. Después, usando una técnica llamada chaining o encadenamiento de funciones, invoca al método .each() del elemento/s al que se hizo referencia en primera instancia, o sea $("div"). Con este método recorre todos los divs anteriores obteniendo sus respectivos IDs y añadiéndolos a los spans que se encuentran dentro de cada uno de ellos.

wilmer30 · #3 (**permalink**) 27/04/2015, 08:48

Muy buena tu explicación.

Muchas gracias