div内のpをjQueryで更新しています

Question

要素のテキストを更新しようとしています（.bus_latitudeクラス）。

まず、私はdata-* attributeの親divを探します。 divを取得した後、クラス.bus_latitudeを持つ最も近いp要素を見つけようとし、テキストを静的コンテンツに設定しようとします。 jQueryにはさまざまな方法がありますが、そのどれもうまくいきませんでした。だから私はいくつかの静的なコンテンツを持つp要素を更新するためのボタンのイベントリスナーを持っている

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");

：

は、だからここに私が持つdiv要素がdata-id ATTR これを持って注入します。それが動作していない場合ここ

である：

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

データIDの両方が正しい、HTMLをレンダリングした場合でも、DIVはupdateBusOnHTMLに入る一方（）と正確に同じIDを有しています。 なぜそれがpのテキストを更新しないのですか？

Answer 1

.val()は、inputのようなフォーム要素の値を更新するために使用されます。代わりに.text()または.html()のような方法を使用してください。

もう1つの推奨：alert()の代わりにconsole.log()を使用してください。