附加到新创建的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）。