Ver Mensaje Individual
  #6 (permalink)  
Antiguo 19/12/2010, 11:16
Avatar de lobo86
lobo86
 
Fecha de Ingreso: mayo-2010
Mensajes: 16
Antigüedad: 14 años, 6 meses
Puntos: 1
Respuesta: jQuery detectar atributo de un elemento

Bueno, después de un buen rato de ensayo-error, parece que el script ya me funciona tal como quiero, así que le puedo decir que duplique un solo input o varios independientemente de sus nombre o atributos.

Os dejo el código haber que os parece, y si se puede optimizar algo o aportar un punto de vista diferente me lo decis...

La estructura html del input del formulario es:

Código HTML:
Ver original
  1. <div class="clonar t-2" data-indice="1" data-nombre="contenedor-telefono">
  2.        <p class="normal" data-nombre="cont-telefono">
  3.               <label for="cont-telefono1">Teléfono:</label>
  4.               <input name="cont-telefono1" id="cont-telefono1" class="number ignore" maxlength="9" />
  5.         </p>
  6.         <p class="normal2" data-nombre="cont-extension">
  7.               <label for="cont-extension1">Extensión:</label>
  8.               <input name="cont-extension1" id="cont-extension1" class="number cont-extension ignore" maxlength="4" />
  9.               <span class="anadir-campo" />
  10.               <span class="borrar" data-indice="1" data-nombre="cont-telefono1"/>
  11.            </p>
  12. </div>

*En este caso puedo introducir el teléfono y una extensión, el span borrar no esta visible para el primer elemento (el original), así no lo pueden eliminar. El tema del class del input ignore es para la validación del formulario...

Y la función jQuery que permite hacer lo que he dicho es:
Código Javascript:
Ver original
  1. //Llamada desde formulario
  2. $("span.anadir-campo").live('click', function(){
  3.         $(this).insertarCampo();
  4. });
  5. (function($) {
  6.     $.fn.insertarCampo = function(){
  7.             elem = $(this)
  8.             //Buscamos el div que contiene los elementos del formulario
  9.             var divClonar = elem.parent().parent();
  10.             //Lo clonamos y los insertamos haciendo un fade
  11.             divClonar.after(divClonar.clone().hide().fadeIn('slow'));
  12.             //Borramos el elemento que contiene el icono de añadir campos
  13.             divClonar.find('span.anadir-campo').remove();
  14.             //Seleccionamos el indice enviado como atributo en el div que contiene los elementos y lo incrementamos
  15.             var indice = divClonar.attr('data-indice');
  16.             var tipoContenedor = divClonar.attr('data-nombre');
  17.             indice++;
  18.             //Seleccionamos el nuevo elemento
  19.             var nuevoElemento = $('div.clonar[data-nombre=' + tipoContenedor + ']:last');
  20.             //incrementamos el atributo indice del nuevo elemento
  21.             nuevoElemento.attr('data-indice', indice);
  22.             //Mediante el bucle each, recorremos todos los elementos hijos del elemento creado y corregimos sus
  23.            //atributos para no crear conflictos con los elementos ya existentes
  24.                 nuevoElemento.children().children().each(function(){
  25.                     var children = $(this);
  26.                     //Seleccionamos el nombre del elemento duplicado, como dentro del div puede haber más de un <p> que
  27.                     //contenga inputs, buscaremos este nombre en el contenedor de estos elementos, en este caso en la
  28.                     //etiqueta <p>
  29.                     var nombreElemento = children.parent().attr('data-nombre');
  30.                     //Comprovamos que atributos tiene el elemento, si tiene el atributo especifico, variamos su nombre.
  31.                     if(children.attr('data-indice')){
  32.                         children.attr('data-indice', indice);
  33.                     }
  34.                     if(children.attr('for')){
  35.                         children.attr('for', nombreElemento + indice);
  36.                     }
  37.                     if(children.attr('name')){
  38.                         children.attr('name', nombreElemento + indice);
  39.                     }
  40.                     if(children.attr('id')){
  41.                         children.attr('id', nombreElemento + indice);
  42.                     }
  43.                 });
  44.                 //Hacemos visible el elemento que contiene el icono de borrar
  45.                 nuevoElemento.find('span.borrar').css('visibility', 'visible');
  46.  
  47.      }
  48. })(jQuery);

Bueno después del tocho este, espero vuestros conejos!!
Gracias