How to get the contents of the dynamic divs?

0

I have the following code, which is added dynamically:

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

And I'm trying to get the name of the drug (within the div class="item-title" that is dynamic), and the amount of drugs inserted (within the div class="item-after" which is also dynamic).

I tried the following, but to no avail:

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

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

How can I resolve this?

    
asked by anonymous 30.06.2017 / 22:06

2 answers

2

The way you did is correct, just incomplete. With the #lista_medicamentos .item-inner selector you only capture div.item-inner , so to capture the name of the drug, just look for the .item-title-* element that is child of this one. Note that since the value of m varies when the element is inserted into the DOM, the * character in the selector will serve as a wildcard. Basically it will look for the element that has a class that starts with .item-title- . See below:

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

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

Addendum: Since the name of the drug is in the element that is the first child of .item-inner , it would be possible to make var title = $(li).first() , possibly being faster than using find .

    
30.06.2017 / 22:39
1

You can use class and id at the same time. The id is fixed.

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

In the HTML part:

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

So it will take the value of% dynamic%.

    
30.06.2017 / 22:38