Geek Answers Handbook

JQuery append order

For the sake of simplicity, I just can't understand why this is not working.

I need to add a div to the body of the document, then a copy of the same div again, but hidden, then another div, then a copy of another div again, but hidden, and so on ...

    $.each(myObj.items, function(i, item) {

        // createItem simply finds an html fragment in the document,
        // clones it and returns it
        var $i = createItem(item);

        // add a div first that clears floats - this is needed before every item
        $('body').append('<div class="clear"/>');

        // append a clone of the html fragment
        $('body').append($i.clone());

        // add another div that clears floats
        $('body').append('<div class="clear"/>');

        // append a clone of the html fragment but hide it
        $('body').append($i.clone().addClass('hidden'));

    });

I expect:

    <body>
        <div class="clear"/>
        <div class="item">item</div>

        <div class="clear"/>
        <div class="item hidden">item</div>

        <div class="clear"/>
        <div class="item">item</div>

        <div class="clear"/>
        <div class="item hidden">item</div>
        ...
    </body>

but i get ..

    <body>
        <div class="clear"/>
        <div class="item">item</div>

        <div class="clear"/>
        <div class="item">item</div>

        <div class="clear"/>
        <div class="item hidden">item</div>

        <div class="clear"/>
        <div class="item">item</div>

        <div class="clear"/>
        <div class="item hidden">item</div>
        ...
    </body>

Why first skip?

Edit

My original html looks like this:

    <html>
        <body>
            <div class="template hidden">..</div>
        </body>
    </html>

I clone the div template, return it to my function, add div (class = 'clear'), then clone the returned div, then another div (class = 'clear'), then another clone the returned div

There are no more than 5 items in my list.

Edit 2

Stupid user error ... code is working fine. I did not realize that the first line I had was hard-coded, and not automatically generated.

Sorry guys ... (feel stupid)

+5
2

div? , , .

+1

(http://jsfiddle.net/alnitak/M5PQ8/), .

, divs ? myObj.items?

0

More articles: