Add DIV’s with different ID’s using Jquery

Question

Hello,

I tried several tricks (unfortunately) but I can’t find a solution to my idea. I have an "app" that creates a to-do list, only I’d like to add to my list a different id for each div added within the div leading.

var main = function(){
  $('button').click(function(){
    var tarefa = $('input[name=tarefa]').val();
    var conferir = $('.item').text();
         if(tarefa==conferir){
       alert("Tarefa já foi adicionada!");
     }

//Adiciona um div com o id item dentro do div com classe lista-tarefa
  $('.lista-tarefa').append('<div id="item">' + tarefa + '</div>');
    $('input[name=tarefa]').val('');
  })
  $(document).on('click', '.item', function(){
    if (confirm("Deseja apagar?")){
    $(this).remove();
    }
  })
}

$(document).ready(main)

In the comment part he will always add a div with the same id, but I’d like to add with a different id so I can do a repeat validation when the user enters the task. In practice I would like to add a div with id="item1", id="item2", and so on.

Answer 1

You can use the date of creation of div to ensure a unique id for div. To generate the id based on the date do the following:

var id = new Date().getTime();

With this you will ensure uniqueness in the ids generated avoiding conflicts.

After generating the id Just invite him into your div before adding to the page.

Answer 2

function guid() {
        return 'f' + (Math.random() * (1 << 30)).toString(16).replace('.', '');
}

In a project that I’m working on, I need to generate several components and I’m using this function to manage the ids. I found this function in a bibilioteca facebook.

What this function does is generate a random number that you can assign in your div.

Example:

var main = function(){
    $('button').click(function(){
        var tarefa = $('input[name=tarefa]').val();
        var conferir = $('.item').text();
        if(tarefa==conferir){
            alert("Tarefa já foi adicionada!");
        }

        //Adiciona um div com o id item dentro do div com classe lista-tarefa
        $('.lista-tarefa').append('<div id="'+ guid() +'">' + tarefa + '</div>');
        $('input[name=tarefa]').val('');
    })

    $(document).on('click', '.item', function(){
        if (confirm("Deseja apagar?")){
            $(this).remove();
        }
    })
}

$(document).ready(main)

Answer 3

You must set a counter and generate the id dynamically:

var contador = 0; // <<<=========== CONTADOR DECLARADO AQUI

var main = function(){
    $('button').click(function(){
        var tarefa = $('input[name=tarefa]').val();
        var conferir = $('.item').text();
        if(tarefa==conferir){
            alert("Tarefa já foi adicionada!");
        }

        // gera o id e incrementa o contador para não gerar id's iguais.
        var id = "item" + contador; // <<<==== ID DECLARADO AQUI
        contador++;

        // repare que utilizamos o id definido anteriormente:
        $('.lista-tarefa').append('<div id="' + id + '">' + tarefa + '</div>');
        $('input[name=tarefa]').val('');

        $("#" + id).on("click", function () {
            if ( confirm("Deseja apagar?") ) {
                $(this).remove();
            }
        });
    });

    $(document).on('click', '.item', function(){
        if (confirm("Deseja apagar?")){
            $(this).remove();
        }
    });
}

$(document).ready(main);

I believe you intend to also add the class item to the task created. Use:

  $('.lista-tarefa').append('<div id="' + id + '" class="item">' + tarefa + '</div>');
    $('input[name=tarefa]').val('');
  });

I hope I’ve helped.