Estoy clonando algunos elementos de formulario y quiero generarles identificadores dinámicos para poder acceder a su contenido más adelante, pero no sé cómo hacerlo, por cierto, soy un novato con Jquery / Javascript.

Mi html:

<tr>
<td>
<label for="ability">Ability</label><br>
    <div id="rank_ability" name="rank_ability">
        <select name="ability" id="ability">
            <option value=""></option>
            <option value="hexa">Test</option>
        </select><br>
        <label for="range_ability_min">Range:</label>
        <input type="textbox" name="range_ability_min" id="range_ability_min" class="small_text" value="0"  /> - 
        <input type="textbox" mame="range_ability_max" id="range_ability_max" class="small_text" value="0"  /><br>
    </div>
    <a href="#page" class="rank_clone">Add Ability</a><br><br>
</td>
</tr>

Mi JS:

$(document).ready(function () {
    var element, ele_nr, new_id;
    $('.rank_clone').click( function() {
        element = $(this).prev();
        ele_nr = $('div[name="'+element.attr('name')+'"]').length;

        new_id = element.attr('name') + ele_nr;

        element.clone().attr('id', new_id).attr('name', new_id).insertAfter(element);
    });
});

Configuré un jsfiddle con lo que obtuve aquí: http://jsfiddle.net/xjoo4q96/

Ahora, estoy usando .prev () para seleccionar el elemento a clonar que conduce a los repetidos 1 en los atributos id / name, ¿cómo podría seleccionarlo de otra manera (para mencionar: realmente necesito usar 'esto' porque yo necesito este pequeño script en 3 lugares, así que no quiero escribirlo para un elemento con una identificación / clase específica).

Además, estoy contando solo el elemento con el atributo de nombre base, por lo que .lenght yelds 1 todo el tiempo, ¿cómo podría contarlos todos? Supongo que tengo que colocarlos en otro div o algo así, pero no sé cómo iría a por ahí maldiciéndolos incluso en ese momento.

Y, por último, ¿cómo cambiaría todos los atributos de nombre / id de los elementos que tengo en el div?

Agradecería cualquier ayuda. Gracias.

1
moonbas3 4 sep. 2014 a las 20:30

3 respuestas

La mejor respuesta

Ya está buscando con el nombre incorrecto, ya que todavía tiene el número adjunto. Así que bórrelo primero, busque el elemento que tenga un atributo de nombre que comience con este nombre y luego use este nombre base para crear uno nuevo.

$(document).ready(function () {
    var element, ele_nr, new_id, base_name;
    $('.rank_clone').click( function() {
        element = $(this).prev();

        base_name = element.attr('name').replace(/[0-9]/g, '');

        ele_nr = $('div[name^="'+base_name+'"]').length;

        new_id = base_name + ele_nr;

        element.clone().attr('id', new_id).attr('name', new_id).insertAfter(element);
    });
});

Y para responder a su última pregunta: no puede cambiar todos los identificadores de los elementos internos, sería HTML no válido. En principio, puede hacer lo mismo con cada ID, como agregar un número. Si tiene que hacer lo mismo con todos los atributos de nombre, dependerá de lo que quiera hacer exactamente. Si tiene que distinguir entre la primera y la segunda entrada, lo que sugiero, también debe cambiarlas.

0
SBH 4 sep. 2014 a las 16:49

Intente usar cloneJs, sus identificadores de clon, entrada de nombres y parámetros dentro de las funciones, los identificadores de entrada deben ser como id_foo_1, id_foo_2 ,,,, y el nombre debe ser como inputName [0] [foo], inputName [1] [foo] https://github.com/yagami271/clonejs

0
ZeroCool 9 may. 2017 a las 14:09

Puede colocar la plantilla en un div oculto como #tmpl, luego clonar y establecer el atributo id, p.

$('#tmpl').children().first().clone().appendTo('#target').attr('id', 'the_generated_id');

Actualizar

Demostración de la forma de la plantilla: http://jsfiddle.net/xjoo4q96/1/, aunque sería será bastante fácil ajustar el código para clonar el primer componente que ya existía.

Por cierto, principalmente, id debe ser único, por lo tanto, el subelemento en el componente clonado debe usar otro atributo, como class o cierto atributo data-, como los utilizados en el violín actualizado.

También es posible que desee llamar a event.preventDefault() mientras hace clic en un <a>

2
ryenus 4 sep. 2014 a las 17:28