Question

我对那些jquery / ajax / javascript老手提出了一个问题，我正在为某个游戏创建一个技能计算器...一切正常，直到这个：

这是ajax输出：

{"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

所以我的问题是..我怎么能追加技能信息＆amp; 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"});
});

但是所有结果都进入了第一个技能，

我试图获得这些：

<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中）。

附加到新创建的div

1 个答案: