jQuery detectar atributo de un elemento

[lobo86]

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:

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

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!!

[echoTREBOR]

¿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'
})}

});

[lobo86]

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!!

[echoTREBOR]

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/

[lobo86]

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.

[lobo86]

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:

<div class="clonar t-2" data-indice="1" data-nombre="contenedor-telefono">
       <p class="normal" data-nombre="cont-telefono">
              <label for="cont-telefono1">Teléfono:</label>
              <input name="cont-telefono1" id="cont-telefono1" class="number ignore" maxlength="9" />
        </p>
        <p class="normal2" data-nombre="cont-extension">
              <label for="cont-extension1">Extensión:</label>
              <input name="cont-extension1" id="cont-extension1" class="number cont-extension ignore" maxlength="4" />
              <span class="anadir-campo" />
              <span class="borrar" data-indice="1" data-nombre="cont-telefono1"/>
           </p>
</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:

//Llamada desde formulario
$("span.anadir-campo").live('click', function(){
        $(this).insertarCampo();
});
(function($) {
    $.fn.insertarCampo = function(){
            elem = $(this)
            //Buscamos el div que contiene los elementos del formulario
            var divClonar = elem.parent().parent();
            //Lo clonamos y los insertamos haciendo un fade
            divClonar.after(divClonar.clone().hide().fadeIn('slow'));
            //Borramos el elemento que contiene el icono de añadir campos
            divClonar.find('span.anadir-campo').remove();
            //Seleccionamos el indice enviado como atributo en el div que contiene los elementos y lo incrementamos
            var indice = divClonar.attr('data-indice');
            var tipoContenedor = divClonar.attr('data-nombre');
            indice++;
            //Seleccionamos el nuevo elemento
            var nuevoElemento = $('div.clonar[data-nombre=' + tipoContenedor + ']:last');
            //incrementamos el atributo indice del nuevo elemento
            nuevoElemento.attr('data-indice', indice);
            //Mediante el bucle each, recorremos todos los elementos hijos del elemento creado y corregimos sus
           //atributos para no crear conflictos con los elementos ya existentes
                nuevoElemento.children().children().each(function(){
                    var children = $(this);
                    //Seleccionamos el nombre del elemento duplicado, como dentro del div puede haber más de un <p> que
                    //contenga inputs, buscaremos este nombre en el contenedor de estos elementos, en este caso en la
                    //etiqueta <p>
                    var nombreElemento = children.parent().attr('data-nombre');
                    //Comprovamos que atributos tiene el elemento, si tiene el atributo especifico, variamos su nombre.
                    if(children.attr('data-indice')){
                        children.attr('data-indice', indice);
                    }
                    if(children.attr('for')){
                        children.attr('for', nombreElemento + indice);
                    }
                    if(children.attr('name')){
                        children.attr('name', nombreElemento + indice);
                    }
                    if(children.attr('id')){
                        children.attr('id', nombreElemento + indice);
                    }
                });
                //Hacemos visible el elemento que contiene el icono de borrar
                nuevoElemento.find('span.borrar').css('visibility', 'visible');
 
     }
})(jQuery);
 

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

[Dany_s]

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:

<html>
    <head>
        <title>Ejemplo</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    </head>
        <script type="text/javascript">
            $( function (){
                fila = $('#telefonos').html();
 
                $('#anadir-campo').live('click', function(e){
                    $(this).removeAttr('id').addClass('eliminar-campo').text('Eliminar');
                    $('#telefonos').append(fila);
                });
 
                $('.eliminar-campo').live('click', function(){
                    $(this).closest('.clonar').remove();
                });
            });
        </script>
 
    <body>
 
    <div id="telefonos">
        <div class="clonar t-2">
            <p class="normal">
                <label>Teléfono:
                <input name="cont-telefono1" id="cont-telefono1" class="number ignore" maxlength="9" /></label>
            </p>
            <p class="normal2">
                <label>Extensión:
                <input name="cont-extension1" id="cont-extension1" class="number cont-extension ignore" maxlength="4" /></label>
                <span id="anadir-campo">Añadir</span>
            </p>
            <hr/>
        </div>
    </div>
 
    </body>
</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/

[lobo86]

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?.

[Dany_s]

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

[lobo86]

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.