2016-07-08 11 views
0

Ich möchte die Klasse der neu angehängten Div jedes Mal ändern. kann ich? Wie?Neu hinzugefügte Div Klasse Änderung mit jquery

HTML:  
<form class="form_num"> 
    Name:<input type="text" class="name_first"/> 
</form> 
<span class="new_form"></span> 
<button type="submit" id="submit">SUBMIT</button> 

JS:

$(document).ready(function(){ 
    $("#submit").click(function(){ 
     $(".form_num").clone().appendTo(".new_form").attr("class","form_num2"); 
     }); 
    }); 
+0

haben Sie gegoogelt: 'addClass()', 'removeClass()', 'toggleClass()' jQuery Helfer? –

+0

Ich brauche wie..zum ersten Mal auf klicken, Klasse ist form_num2, dann form_num3, dann form_num4 ................. –

+0

Sie müssen also eine Integer-Variable inkrementiert werden Jeder Klick und verkettet zu 'Form_num' string –

Antwort

1

Sie diese wie in der Demo sehr leicht tun können wie folgt dar: -

var n = 1; 
 
$("#submit").click(function() { 
 
    $(".form_num").clone().appendTo(".new_form").attr("class", "form_num" + ++n) 
 
     
 
    // This is not needed as clone method returns the newly added form element 
 
    //$('.new_form').find(".form_num").attr("class", "form_num" + ++n); 
 
      
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> 
 
<form class="form_num"> 
 
    Name: 
 
    <input type="text" class="name_first" /> 
 
</form> 
 
<span class="new_form"></span> 
 
<button type="submit" id="submit">SUBMIT</button>

+1

Was ist der Zweck der Verwendung von' jQuery.find() 'hier? 'appendTo (". new_form ")' liefert normalerweise die benötigte jQuery und attr() wird verkettet. habe ich recht? Danke Palash –

+1

Danke für das Hinzeigen. Ich hatte vergessen, dass 'clone()' das neue Element zurückgibt und wir können jede Operation für dieses Element mit der Verkettung fortsetzen. +1 –

+0

danke für die Bestätigung, dass +1 –

0

dies sollte in der Regel arbeiten:

var i = 1; 

$(document).ready(function(){ 
    $("#submit").click(function(){ 
     $(".form_num").clone().appendTo(".new_form").attr("class","form_num"+i); 
     i++; 
     }); 
    }); 

jsfidlle:

https://jsfiddle.net/4smhx797/1/

0

können Sie diese verwenden -

$(document).ready(function() { 

    //initialize counter 
    var incrementer = 0; 
    $("#submit").click(function() { 
     $(".form_num").clone().appendTo(".new_form").attr("class", "form_num" + incrementer); 
     incrementer++; 
    }); 
}); 
Verwandte Themen