[英]Updating p in div with jQuery
我正在尝试更新具有.bus_latitude
类的p
元素的文本。
因此,首先,我找到具有data-* attribute
的父div。 检索div后,我尝试找到其最接近的p元素(其类为.bus_latitude
,并将其文本设置为静态内容。 我尝试了许多方法,特别是因为jQuery有多种方法可以执行此操作,但是没有一种有效。
所以在这里,我注入一个具有data-id
attr的div:
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">  '+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");
因此,我有一个按钮的事件侦听器,用于用一些静态内容更新p元素。
这是不起作用的地方:
function updateBusOnHTML(bus) {
alert(bus.getKey());
$("div[data-id='" + bus.getKey() +"'] .bus_information .bus_latitude").val("39.284035"); //this doesn't work, bus.getKey()
}
这两个data-id都是正确的,即使呈现HTML时,div的ID与输入updateBusOnHTML()的ID也是完全相同的。 那为什么不更新p
文本呢?
.val()
用于更新诸如input
之类的表单元素的值。 请改用.text()
或.html()
类的方法。
另一个建议:使用console.log()
代替alert()
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.