使用jQuery更新div中的p

Question

我正在嘗試更新具有.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">&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"); 

因此，我有一個按鈕的事件偵聽器，用於用一些靜態內容更新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文本呢？

Answer 1

.val()用於更新諸如input之類的表單元素的值。 請改用.text()或.html()類的方法。

另一個建議：使用console.log()代替alert() 。