Add DIV's with different ID's using Jquery

Question

Add DIV's with different ID's using Jquery

Navigation

#1 by (1 votes)
#2 by (1 votes)
#3 by (0 votes)

0

Hello,

I tried several gambiarras (unfortunately) but I can not find a solution to my idea. I have an "app" that creates a task list, only I would like to add to my list a different id for each div added inside the div main%.

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 it will always add a div with the id equal, however I would like to add with different id to be able to do a repeat validation when the user enters the task. In practice I'd like to add a div with id="item1" , id="item2" , and so on.

javascript jquery

asked by anonymous 09.04.2015 / 14:42

3 answers

How to fill a web form through C # Loop in javascript does not add object property

score 1 · Answer 1

You can use the creation date of the div to ensure a unique id for the 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 generated ids avoiding conflicts.

After generating the id , just concatenate it in your div before adding it to the page.

score 1 · Answer 2

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

In a project I'm working on, I need to generate multiple components and I'm using this function to manage the ids. I found this feature in a library from facebook.

What this function does is generate a random number that you can assign to 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)

score 0 · Answer 3

You should define a counter and generate 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 item class to the created task. Use:

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

I hope I have helped.