CODEWITHSUNDEEP
javascriptjquery
AlpSenel
AlpSenel

Reputation: 181

creating elements with jquery and giving them different classes

Cloning every child that .clone has

<section class="clone">
   <div class="input-group">
      <input type="text" class="form-control" placeholder="insert step 2 title*">
   </div>
</section>

And cloning with click function

$('.btnAnotherStep').on('click',function(){
    var copy =  $('.clone>*').clone();
    $('.container').append(copy);

Everything is ok but my question is ; Is it possible give different class names to the cloned inputs. Like;

<input type="text" class="form-control input2" placeholder="insert 
step 2 title*">
<input type="text" class="form-control input3" placeholder="insert step 2 title*">
<input type="text" class="form-control input4" placeholder="insert step 2 title*">

My first opinion was creating every element from scratch with jquery and for the class name incrementing i by 1 

var totalInputs = [];
var i = 0;
while(i < 10){
  var input = $("input", {"class": "input[i]"); //but its not possible to refer like that 
  $('body').append(input);
  i++;
}

any way to do that because "" inside this marks it doesnt see it like an number?

Upvotes: 2

Views: 70

Answers (3)

Titus
Titus

Reputation: 22474

You can use string concatenation for this kind of thing:

var input = $("input", {"class": "input"+i);

Or a template literal:

var input = $("input", {"class": `input${i}`);

You can learn more about template literals HERE

Basically, you can create them using the backquote ` character and every thing inside ${...} is interpreted as code.

You should take a look at the Browser compatibility section on the MDN page because template literals are not supported in all browser.

Upvotes: 3

Carl Edwards
Carl Edwards

Reputation: 14434

You can loop through the cloned elements, grab the index in an each loop and place that index inside a template literal or traditionally through string concatenation. No need to create an additional loop outside the initial click event:

$(function() {
  $('.btnAnotherStep').on('click',function(){
    var copy =  $('.clone > *').clone();

    copy.each(function(index, elem) {
      const $this = $(this);

      if ($this.is('input')) {
        $this.addClass(`input${i}`);
      }
    });

    $('.container').append(copy);
  });
});

Upvotes: 0

samanime
samanime

Reputation: 26547

After your .clone(), you can do an .each() to loop through all of the elements and make whatever change you want to the classes in there. If they are nested elements, you'll also want to run it on each of their children. If that's the case, you'll want to make your class changing function separate so it can run recursively.

Something like this:

const changeClass = element => {
  // do something here to change the class name how you want for $(element)
  $(element).children().each(changeClass);
};

$('.btnAnotherStep').on('click',function(){
  var copy =  $('.clone>*').clone().each(changeClass);
  $('.container').append(copy);
});

What you do to the class name is up to you, but it'll likely be some kind of string transformation.

Upvotes: 0

Related Questions