Question

I have a question to those jquery/ajax/javascript veterans, im creating a skill calculator for a certain game… everything is working fine up until this:

this is the ajax output:

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

this is my 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"});
    });
    }
    }
}

this is my div:

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

so my problem is.. how can i append skillinfo & skilltxt to skilldesc which is just appended to skilldiv…

i tried this:

$.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"});
});

but all results go into the first skilldesc,

im trying to get these:

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

but i get this instead;

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

any help would be very much appreciated . . . thx

Answer 1

Because .skilldesc selects the first div too.

You can try this,

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

});

Also, you should to manipulations in objects in memory (not in dom).