0

Tenho o seguinte código, que é adicionado dinamicamente:

var m = 0;
$$("#add_medicamento").click(function(){
m++;
var medicamento = $$("#select_medicamento").val();
var qnt = $$("#quantidade").val();
$$("#lista_medicamentos").append('<li class="swipeout">'+
                                '  <div class="swipeout-content item-content">'+
                                '    <div class="item-inner">'+
                                '       <div class="item-title-'+m+'">'+medicamento+'</div>'+
                                '       <div class="item-after-'+m+'">'+qnt+'</div>'+
                                '    </div>'+
                                '  </div>'+
                                '  <div class="swipeout-actions-right">'+
                                '    <!-- Add this button and item will be deleted automatically -->'+
                                '    <a href="#" class="swipeout-delete">Apagar</a>'+
                                '  </div>'+
                                '</li>');
 })

E estou tentando pegar o nome do medicamento (dentro da div class="item-title" que é dinâmica), e a quantidade de medicamentos inseridos (dentro da div class="item-after" que também é dinâmica).

Tentei da seguinte forma, mas sem sucesso:

var medicamentos = $$("#lista_medicamentos .item-inner");

medicamentos.each(function(idx, li){
    var teste = $(li);
    alert(teste);
})

Como posso resolver isso?

4
  • Algum alerta é emitido?
    – Woss
    Commented 30/06/2017 às 20:23
  • Sim! [Object Object], e se eu mudar para o console.log, aparece o seguinte: Object [ <div.item-inner> ] Commented 30/06/2017 às 20:27
  • Então está funcionando. No lugar do alert tente colocar console.log(teste.find(".item-title-*").html())
    – Woss
    Commented 30/06/2017 às 20:30
  • Opa, deu certinho @AndersonCarlosWoss .Se quiser postar como resposta, confirmo! Obrigado! Commented 30/06/2017 às 20:36

2 Respostas 2

2

A maneira que você fez está correta, apenas incompleta. Com o seletor #lista_medicamentos .item-inner você apenas captura a div.item-inner, então para capturar o nome do medicamento, basta procurar o elemento .item-title-* que é filho deste. Veja que como o valor de m varia quando o elemento for inserido no DOM, o caractere * no seletor servirá de coringa. Basicamente ele procurará o elemento que possui uma classe que começa com .item-title-. Veja abaixo:

var medicamentos = $$("#lista_medicamentos .item-inner");

medicamentos.each(function(idx, li){
    var title = $(li).find(".item-title-*");
    console.log(title.html());
})

Adendo: como o nome do medicamento está no elemento que é o primeiro filho de .item-inner, seria possível fazer var title = $(li).first(), sendo, possivelmente, mais rápido que utilizar o find.

4
  • Como coringa, não funcionou, mas coloquei uma variável dinâmica, e deu certo, pois podem ser vários medicamentos! Commented 30/06/2017 às 20:49
  • Como assim "variável dinâmica"?
    – Woss
    Commented 30/06/2017 às 20:50
  • function cadastrar(){ var t = 0; var medicamentos = $$("#lista_medicamentos .item-inner"); medicamentos.each(function(idx, li){ t++; var mq = $(li); console.log(mq.find(".item-title-"+t+"").html()+ ' - '+ mq.find(".item-after-"+t+"").html()); }) } Commented 30/06/2017 às 20:51
  • 1
    Pode tentar o seletor [class^="item-title-"] também
    – Woss
    Commented 30/06/2017 às 20:52
1

Você pode usar classe e id ao mesmo tempo. A id fica de forma fixa.

var teste = $('#teste55').val();
alert(teste);

Na parte de HTML:

<div id="teste55" class="item-title-'+m+'">'+medicamento+'</div>'+

Assim ele pegará o valor da div dinâmica.

1
  • 1
    Obrigado pela dica, @Stéfano Commented 30/06/2017 às 20:41

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 .