How to get the contents of dynamic Ivs?

Asked

Viewed 56 times

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" which is dynamic), and the amount of drugs inserted (within the div class="item-after" which is also dynamic).

I tried it this way, but without success:

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

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

How can I fix this?

javascript jquery each

  • Some warning is issued?

  • Yes! [Object Object], and if I switch to the.log console, the following appears:: Object [ <div.item-inner> ]

  • So it’s working. In place of alert try to put console.log(teste.find(".item-title-*").html())

  • Opa, gave right @Andersoncarloswoss . If you want to post as an answer, confirm! Thanks!

2 answers

2


The way you did it is correct, only incomplete. With the selector #lista_medicamentos .item-inner you just capture the div.item-inner, then to capture the name of the medicine, just search for the element .item-title-* which is the son of this. See that as the value of m varies when the element is inserted into the DOM, the character * in the selector will serve as a joker. 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: as the name of the medicine is in the element that is the first child of .item-inner, it would be possible to do var title = $(li).first(), possibly faster than using the find.

  • As a joker, it didn’t work, but I put in a dynamic variable, and it worked, because there could be several medications!

  • As well as "dynamic variable"?

  • function cadastrar(){ &#xA; var t = 0;&#xA; var medicamentos = $$("#lista_medicamentos .item-inner");&#xA; medicamentos.each(function(idx, li){ t++;&#xA; var mq = $(li);&#xA; console.log(mq.find(".item-title-"+t+"").html()+ ' - '+ mq.find(".item-after-"+t+"").html());&#xA; })&#xA;}

  • 1

    You can try the dial [class^="item-title-"] also

1

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

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

In the HTML part:

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

So he’ll take the value of div dynamics.

Browser other questions tagged javascript jquery each

You are not signed in. Login or sign up in order to post.