使用jQuery更新div中的p

Question

I'm trying to update the text of a p element which has a .bus_latitude class.

So first, I locate the parent div which has a data-* attribute . After retrieving the div, I try to locate his closest p element which has the class .bus_latitude , and set his text to some static content. I have tried enoumerous ways, specially because jQuery has various methods to do so, but none of them worked.

So here I inject a div with has a data-id attr this:

 var div = $('<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 bus_card" data-id="'+bus.getKey()+'"><br/><br/>'+ '<div class="thumbnail">'+ ' <div class="caption">'+ ' <div class="col-lg-12">'+ ' <div class="header">'+ ' <h4 class = "line_name" style="text-align:center;color:'+line.child("colorNormal").val()+';"><strong>Linha '+line.getKey()+'</strong></h4>'+ ' </div>'+ ' </div>'+ ' <div class="col-lg-12 well well-add-card">'+ ' <h4 class="pull-left">Cartão:</h4>'+ ' <h4 class="pull-right">'+bus.child('cardid').val()+'</h4>'+ ' </div>'+ ' <div class="col-lg-12 bus_information">'+ ' <div style="padding-left:10px!important;" class="row">'+ ' <p class="pull-left"><kbd>Latitude</kbd></p>'+ ' <p class="pull-right bus_latitude">'+bus.child('lat').val()+'</p>'+ ' </div>'+ ' <div style="padding-left:10px!important;" class="row">'+ ' <p class="pull-left"><kbd>Longitude</kbd></p>'+ ' <p class="pull-right bus_longitude">'+bus.child('long').val()+'</p>'+ ' </div>'+ ' <div style="padding-left:10px!important;" class="row">'+ ' <p class="pull-left"><kbd>Velocidade:</kbd></p>'+ ' <p class="pull-right bus_velocity">35km/h</p>'+ ' </div>'+ ' <div style="padding-left:10px!important;white-space: nowrap; overflow:hidden;" class="row">'+ ' <p class="pull-left"><kbd>Geo-localização:</kbd></p>'+ ' <class = "bus_georeference">&nbsp&nbsp'+streetNameOfPosition+'</>'+ ' </div>'+ ' </div>'+ ' <button type="button" class="btn '+(bus.child('state').val() === 1 ? 'btn-danger' : 'btn-default')+' btn-xs btn-update btn-add-card">Em Terminal</button>'+ ' <button type="button" class="btn '+(bus.child('state').val() === 2 ? 'btn-danger' : 'btn-default')+' btn-xs btn-update btn-add-card">Em Andamento</button>'+ ' <button type="button" class="btn '+(bus.child('state').val() === 3 ? 'btn-danger' : 'btn-default')+' btn-xs btn-update btn-add-card">Em Paragem</button>'+ ' </div>'+ '</div>'+ '</div>').appendTo("#bus-cards-container"); 

So I have an event listener for a button to update the p element with some static content.

Here is where it isn't working:

    function updateBusOnHTML(bus) {
       alert(bus.getKey());
       $("div[data-id='" + bus.getKey() +"'] .bus_information .bus_latitude").val("39.284035"); //this doesn't work, bus.getKey()
}

Both data-id are correct, even when the HTML is rendered, the div has the exact same id with the one that enters updateBusOnHTML(). So why doesn't it update the p text?

Answer 1

.val() is used to update the value of a form element like input . Use a method like .text() or .html() instead.

Another recommendation: use console.log() instead of alert() .