附加到新創建的div

Question

我有這些問題的jQuery/AJAX/JavaScript的老兵，即時創建一個技能計算器一定的遊戲......一切工作正常，直到此：

這是阿賈克斯輸出：

{"skills":{"skill_id_1":"skill_name_1","skill_id_2":"skill_name_2"}} 

這是我的ajax：

function setOutput(){ 
    if(httpObject.readyState == 4){ 
    var results = eval('('+httpObject.responseText+')'); 
    if (results['skills']){ 
    $('#skilldiv').empty(); // empty div 
    $.each(results['skills'], function(key, value) 
    { 
     $("<div></div>").appendTo("#skilldiv").attr({class: "skilldesc"}); 
     $("<div>&nbsp;</div>").appendTo(".skilldesc").attr({class: "skillinfo"}); 
     $("<div>&nbsp;</div>").appendTo(".skilldesc").attr({class: "skilltxt"}); 
    }); 
    } 
    } 
} 

這是我的div：

<div id="wrapper"> 
    <ul> 
     <li id="skilldiv"></li> 
    </ul> 
</div 

所以我的問題是..我怎麼可以追加skillinfo & skilltxt到skilldesc這是剛剛追加到skilldiv ...

我想這：

$.each(results['skills'], function(key, value) 
{ 
    $("<div></div>").appendTo("#skilldiv").attr({class: "skilldesc"}); 
    $("<div>&nbsp;</div>").appendTo(".skilldesc").attr({class: "skillinfo"}); 
    $("<div>&nbsp;</div>").appendTo(".skilldesc").attr({class: "skilltxt"}); 
}); 

但所有的結果進入第一skilldesc，

我嘗試讓這些：

<div id="wrapper"> 
    <ul> 
     <li id="skilldiv"> 
      <div class="skilldesc"> 
       <div class="skillinfo">Some Info of skill 1 here</div> 
       <div class="skilltxt">Name of skill 1 here</div> 
      </div> 
      <div class="skilldesc"> 
       <div class="skillinfo">Some Info of skill 2 here</div> 
       <div class="skilltxt">Name of skill 2 here</div> 
      </div> 
     </li> 
    </ul> 
</div> 

但我得到這個，而不是;

<div id="wrapper"> 
    <ul> 
     <li id="skilldiv"> 
      <div class="skilldesc"> 
       <div class="skillinfo">Some Info of skill 1 here</div> 
       <div class="skilltxt">Name of skill 1 here</div> 
       <div class="skillinfo">Some Info of skill 2 here</div> 
       <div class="skilltxt">Name of skill 2 here</div> 
      </div> 
      <div class="skilldesc"></div> 
     </li> 
    </ul> 
</div> 

任何幫助將非常感激。 。 。 thx

Answer 1

因爲.skilldesc也選擇第一個div。

你可以試試這個，

$.each(results['skills'], function(key, value) 
{ 
    $skilldesc = $("<div></div>").attr({class: "skilldesc"}); 
    $("<div>&nbsp;</div>").appendTo($skilldesc).attr({class: "skillinfo"}); 
    $("<div>&nbsp;</div>").appendTo($skilldesc).attr({class: "skilltxt"}); 
    $skilldiv.appendTo("#skilldiv"); 

}); 

此外，你應該在內存中的對象的操作（不是在DOM）。