CODEWITHSUNDEEP
jquery
jQueryster
jQueryster

Reputation: 169

How to set incremented ID values to div elements created on the fly using jQuery?

I have a DIV called .number that holds the number 456 as text. I basically, create three DIV elements on the fly using jQuery and as text, I set each digit from the div.number to each DIV element. How do I set an incremented ID value to the three DIV elements that are created on the fly? And if there is a better way on how to create these three DIV elements on the fly, I'd be glad to expand my knowledge.

I've been trying to make work, but this is really beyond my knowledge...

Javascript/jQuery code 

var x = 1;
    var result = $('.result');
    var btn = $('button');

    btn.on('click', function(){
          var row1 = $('<div class="row" id="row__'+x+'"></div>');
          var row2 = $('<div class="row" id="row__'+x+'"></div>');
          var row3 = $('<div class="row" id="row__'+x+'"></div>');

          var stringToSplit = $('.number').text();
           
          row1.text(stringToSplit.charAt(0) + ' -> #' + x);
          row2.text(stringToSplit.charAt(1) + ' -> #' + x);
          row3.text(stringToSplit.charAt(2) + ' -> #' + x);

          result.append(row1, row2, row3);
          $(this).hide();
          x++;
    });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <div class="number">456</div>

    <div class="result">

    </div>
    <button>Get</button>

I expect the output of 4 -> #1 in the first DIV, 5 -> #2 in the second DIV, 6 -> #3 in the third DIV,

Upvotes: 0

Views: 31

Answers (2)

ThS
ThS

Reputation: 4783

You need to increment the x's value while appending it to the row1, row2 and row3 text. You did increment the x but at the end of the handler function so no updated values for x are printed.

If You don't hide the button once it's clicked, clicking it again and again will do the same (as you had) but it keeps on incrementing x so you'll have : 

/** first click **/
4 -> #1
5 -> #1
6 -> #1

/** second click **/
4 -> #2
5 -> #2
6 -> #2

/** third click **/
4 -> #3
5 -> #3
6 -> #3

/** nth click **/
4 -> #n
5 -> #n
6 -> #n

So in order to get the correct values for the x variable you need to increment it while printing it into the row* variable. Also, x must be local to the handler function so that you'll have the wanted result even if you click the button more than once :

in the next demo, the button doesn't get hidden to allow you to click it many times to see the results.

var result = $(".result");
var btn = $("button");

btn.on("click", function() {
  var x = 1; /** x is now a local variable so it reinitialized each time thebutton is clicked **/
  var row1 = $('<div class="row" id="row__' + x + '"></div>');
  var row2 = $('<div class="row" id="row__' + x + '"></div>');
  var row3 = $('<div class="row" id="row__' + x + '"></div>');

  var stringToSplit = $(".number").text();

  row1.text(stringToSplit.charAt(0) + " -> #" + x++); /** x++: prints 1 and then increments **/
  row2.text(stringToSplit.charAt(1) + " -> #" + x++); /** x++: prints 2 and then increments **/
  row3.text(stringToSplit.charAt(2) + " -> #" + x); /** prints 3 **/

  result.append(row1, row2, row3);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="number">456</div>
<div class="result"></div>
<button>Get</button>

Upvotes: 1

hassanrrs
hassanrrs

Reputation: 73

Use this code

var result = $('.result');
    var btn = $('button');

    btn.on('click', function(){
          var x = 3;
          var stringToSplit = $('.number').text();
          for(var i=0;i<x;i++){
              var div = $('<div class="row" id="row__'+(i+1)+'"></div>');
              div.text(stringToSplit.charAt(i) + ' -> #' + (i+1));
              result.append(div);
          }

          $(this).hide();

    });

Upvotes: 1

Related Questions