0

Olá,

Tentei varias gambiarras (infelizmente) porém não consigo achar uma solução para minha idéia. Eu tenho um "app" que cria uma lista de tarefas, só que eu gostaria de adicionar a minha lista um id diferente para cada div adicionado dentro do div principal.

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)

Na parte do comentário ele sempre vai adicionar uma div com o id igual, porém eu gostaria de adicionar com id diferente para poder fazer uma validação de repetição quando o usuário inserir a tarefa. Na pratica eu gostaria de adicionar um div com id="item1", id="item2", e assim por diante.

3 Respostas 3

1

Você pode utilizar a data da criação da div para garantir um id único para a div. Para gerar o id com base na data faça o seguinte:

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

Com isso você irá garantir unicidade nos ids gerados evitando conflitos.

Depois de gerar o id basta concatená-lo na sua div antes de adicionar na página.

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

Em um projeto que eu estou trabalhando, eu preciso gerar vários componentes e eu estou utilizando essa função para gerenciar os ids. Eu encontrei essa função em uma bibilioteca do facebook.

O que essa função faz é gerar um número aleatório que você pode atribuir em sua div.

Exemplo:

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)
0

Você deve definir um contador e gerar o id dinamicamente:

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);

Acredito que você tenha a intenção de também adicionar a classe item à tarefa criada. Use:

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

Espero ter ajudado.

4
  • Vinicius, tentei usar do seu modo porém faltou declarar a variavel contador, pois quando executo o código ele fala que a variavel não existe. E caso eu inicie ela com 1 ou 0 ela sempre adiciona o mesmo numero.
    – RFL
    Commented 9/04/2015 às 13:11
  • não preciso adicionar uma classe ao final, eu estava usando classes para manipulação mesmo. Na parte onde voce coloca o $("#" + id).on... Não funciona uncaugth ReferenceError: id is not defined.
    – RFL
    Commented 9/04/2015 às 13:42
  • No meu código a variável contador esta declarada e inicializada, bem como id no seu escopo de uso. Vou destacar as declarações dessas variáveis no meu código, pois provavelmente faltou copiar alguma coisa para o seu código. Commented 9/04/2015 às 17:01
  • Removi o trecho final da resposta. Ficou confuso hehehe. Commented 9/04/2015 às 17:07

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .