在JQuery中設置變量的HTML時遇到問題

Question

我所做的是從文件中加載了一些HTML，我試圖修改該HTML中的一些元素。

初始化看起來是這樣的：

var id = player_info["ID"]; 
$("#main_container").append(
    $("<div />").attr({class: "player_container", id: "player_" + id}).css("display", "none") 
); 

// Add all information to the player container 
var player_container = $("#player_" + id); 
player_container.load("player_layout.html"); 

隨着player_layout.html看起來像這樣：

<div class="player_name"> 

</div> 
<div class="player_chips"> 
    Chips: 
    <br/> 
    <span class='bidding'></span>/<span class='chips'></span> 
</div> 
<div class="player_stats"> 
    Wins/Losses 
    <br/> 
    <span class="wins"></span>/<span class="losses"></span>(<span class="total_games"></span>) 
    <br/><br/> 
    Chips Won/Chips Lost 
    <br/> 
    <span class="chips_won"></span>/<span class="chips_lost"></span> 
</div> 
<button class="player_won">Player Has Won</button> 

我再要修改的一些內容，特別是類。我最初做這個方式的一個例子是：

player_container.find(".player_name").text(player_info['username']); 

這是行不通的，所以我然後試圖用children和text切換find與html但似乎並沒有工作。然後我試過這個：

$('> .player_name', player_container).html(player_info['username']); 

但這也沒有奏效。我知道我可以使用DOM來獲取childNodes並比較類名，但是有很多類需要修改，我也想知道這是否可以在JQuery中使用。預先感謝您的幫助。

Answer 1

您需要使用的.load()

var player_container = $("#player_" + id); 
player_container.load("player_layout.html", function(){ 
    player_container.find(".player_name").text(player_info['username']); 
});