Foros del Web » Programando para Internet » Jquery »

jQuery detectar atributo de un elemento

Estas en el tema de jQuery detectar atributo de un elemento en el foro de Jquery en Foros del Web. Hola, estoy diseñando una aplicación web con jquery y en un formulario quiero generar dinamicamente algunos campos, para ello lo que hago es clonar el ...
  #1 (permalink)  
Antiguo 18/12/2010, 09:41
Avatar de lobo86  
Fecha de Ingreso: mayo-2010
Mensajes: 16
Antigüedad: 13 años, 10 meses
Puntos: 1
Pregunta jQuery detectar atributo de un elemento

Hola, estoy diseñando una aplicación web con jquery y en un formulario quiero generar dinamicamente algunos campos, para ello lo que hago es clonar el elemento a duplicar y le modifico los atributos necesarios para que no este repetido.

Aquí os pongo el código que tengo para saber que atributo tiene el elemento y si lo tiene se lo modifico para que no este repetido.

Código Javascript:
Ver original
  1. nuevoElemento.children().each(function(){
  2.                 var children = $(this);
  3.                 if(children.attr('data-indice')){
  4.                     children.attr('data-indice', indice);
  5.                 }
  6.                 if(children.attr('for')){
  7.                     children.attr('for', nombreElemento + indice);
  8.                 }
  9.                 if(children.attr('name')){
  10.                     children.attr('name', nombreElemento + indice);
  11.                 }
  12. });

Mi pregunta es: No hay alguna forma más rápida o óptima de saber si el elemento en cuestión que atributos tiene y modificarlos.

Es que creo que lo que he hecho no es muy óptimo, ya que para cada elemento (label, input,...) que contiene el elemento creado hago 3 if.

Bueno haber que me decis, gracias!!
  #2 (permalink)  
Antiguo 18/12/2010, 10:09
Avatar de echoTREBOR  
Fecha de Ingreso: marzo-2010
Ubicación: Venezuela inc.
Mensajes: 56
Antigüedad: 14 años
Puntos: 2
Respuesta: jQuery detectar atributo de un elemento

¿y porque no lo metes en un solo condicional y le cambias todas la propiedades de una vez.?

nuevoElemento.children().each(function(){
var children = $(this);
if(children.attr('data-indice')){
children.attr({
data-indice: 'indice', for: 'nombreElemento + indice', name: 'nombreElemento + indice'
})}

});
  #3 (permalink)  
Antiguo 18/12/2010, 10:17
Avatar de lobo86  
Fecha de Ingreso: mayo-2010
Mensajes: 16
Antigüedad: 13 años, 10 meses
Puntos: 1
Respuesta: jQuery detectar atributo de un elemento

Gracias por contestar tan rápido echoTREBOR,

No puedo añadirle todos los atributos de golpe porque el elemento a duplicar esta compuesto por varios elementos.

Label con el nombre del campo.
Input con la caja de texto.
span con un icono de añadir otro campo
span con un icono de borrar el campo

Cada uno de ellos tiene atributos diferentes, por ejemplo el atributo name solo lo tiene el input.

Por eso solo quiero que se modifiquen los atributos que ya tiene cada elemento a duplicar.

Gracias!!
  #4 (permalink)  
Antiguo 18/12/2010, 15:17
Avatar de echoTREBOR  
Fecha de Ingreso: marzo-2010
Ubicación: Venezuela inc.
Mensajes: 56
Antigüedad: 14 años
Puntos: 2
Respuesta: jQuery detectar atributo de un elemento

el metodo que estas usando no es el mejor...

es preferible que valles construyendo tus propios inputs de forma dinamica con sus propiedades listas.

¿como?

asi -> http://papermashup.com/demos/dynamic-form/
  #5 (permalink)  
Antiguo 19/12/2010, 07:10
Avatar de lobo86  
Fecha de Ingreso: mayo-2010
Mensajes: 16
Antigüedad: 13 años, 10 meses
Puntos: 1
Respuesta: jQuery detectar atributo de un elemento

Hola!!

Y si en vez de introducir manualmente el código, hago un clone(), del elemento sobre el que clickan.

Lo digo porque quiero que la misma función me sirva para clonar diferentes elementos del formulario, telefono, mail o productos (por ejemplo)...

Bueno gracias por tu tiempo, esta tarde seguiré haciendo pruebas y según como quede lo subo haber que te parece.
  #6 (permalink)  
Antiguo 19/12/2010, 11:16
Avatar de lobo86  
Fecha de Ingreso: mayo-2010
Mensajes: 16
Antigüedad: 13 años, 10 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
  #7 (permalink)  
Antiguo 20/12/2010, 07:20
 
Fecha de Ingreso: diciembre-2009
Ubicación: Misiones
Mensajes: 867
Antigüedad: 14 años, 3 meses
Puntos: 65
Respuesta: jQuery detectar atributo de un elemento

no hace falta índices para saber dónde haces click o cómo ubicar elementos, tenés que manejarte con el elemento contenedor porque lo que querés hacer es copiar una estructura para duplicarlo y para los eventos también

Fijate que sencillo, primero me obtengo todo el html que está en #telefonos porque eso es lo que quiero duplicar, cuando hago click en clase #anadir-campo borro el id, le agrego la clase .eliminar-campo y le cambio el texto, luego agrego el html con todos los campos que seria la nueva fila al contenedor #telefonos.

Para eliminar solo me muevo desde el elemento que hicieron click hasta el elemento contenedor que le indico a closest y lo borro, en este caso es el div .clonar que seria la fila.

Código HTML:
Ver original
  1.     <head>
  2.         <title>Ejemplo</title>
  3.         <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  4.     </head>
  5.         <script type="text/javascript">
  6.             $( function (){
  7.                 fila = $('#telefonos').html();
  8.  
  9.                 $('#anadir-campo').live('click', function(e){
  10.                     $(this).removeAttr('id').addClass('eliminar-campo').text('Eliminar');
  11.                     $('#telefonos').append(fila);
  12.                 });
  13.  
  14.                 $('.eliminar-campo').live('click', function(){
  15.                     $(this).closest('.clonar').remove();
  16.                 });
  17.             });
  18.         </script>
  19.  
  20.     <body>
  21.  
  22.     <div id="telefonos">
  23.         <div class="clonar t-2">
  24.             <p class="normal">
  25.                 <label>Teléfono:
  26.                 <input name="cont-telefono1" id="cont-telefono1" class="number ignore" maxlength="9" /></label>
  27.             </p>
  28.             <p class="normal2">
  29.                 <label>Extensión:
  30.                 <input name="cont-extension1" id="cont-extension1" class="number cont-extension ignore" maxlength="4" /></label>
  31.                 <span id="anadir-campo">Añadir</span>
  32.             </p>
  33.             <hr/>
  34.         </div>
  35.     </div>
  36.  
  37.     </body>
  38. </html>

borre todos esos atributos indices que tenias y para que funcione el label sin tener que cambiar el atributo for puse el input adentro

Y podés agregarle otros campos como característica, tipo, etc y no hay que modificar nada

aca tenés otro ejemplo
http://www.forosdelweb.com/f127/jque...tro-td-869391/
  #8 (permalink)  
Antiguo 20/12/2010, 09:29
Avatar de lobo86  
Fecha de Ingreso: mayo-2010
Mensajes: 16
Antigüedad: 13 años, 10 meses
Puntos: 1
Respuesta: jQuery detectar atributo de un elemento

Gracias Dany_s,

El código así es mucho más corto (y me lio menos con los parent() y los child()), lo único es que en principio si que me hace falta un indice ya que de esta manera todos los elementos creados tienen el mismo atributo name, en el input y si lo envio para insertar en una base de datos no lo recibirá bien ¿no?.
  #9 (permalink)  
Antiguo 20/12/2010, 11:04
 
Fecha de Ingreso: diciembre-2009
Ubicación: Misiones
Mensajes: 867
Antigüedad: 14 años, 3 meses
Puntos: 65
Respuesta: jQuery detectar atributo de un elemento

y como cualquier otro formulario estático con array

name="telefono[]" y de de la extensió name="extension[]"

http://www.webtaller.com/construccio...ulario-php.php
  #10 (permalink)  
Antiguo 20/12/2010, 11:52
Avatar de lobo86  
Fecha de Ingreso: mayo-2010
Mensajes: 16
Antigüedad: 13 años, 10 meses
Puntos: 1
Respuesta: jQuery detectar atributo de un elemento

Gracias!!!!!!

No sabia eso de los arrays en formularios, como te habras dado cuenta no tengo mucha experiencia...

Bueno espero tener tiempo para modificarlo y ya comentaré si todo sale bien.

Etiquetas: attr, clon
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 20:35.