Insert html content at certain index with jQuery
<p>I'm having a strange situation here.. I have three links which are loading content with ajax. First time when one of these three links is pressed, the content is sliding down but I want that the next li to animate left/right depending on their position in main menu. Right now they are appended to the #content element.</p>

<p>What I want is to give the loaded content from the start a certain index.. as the index which appear in the main menu..</p>

<p>You can see an example at <a href="http://www.openminded.ro/" rel="nofollow">http://www.openminded.ro/</a></p>

<p>This is the script I'm using right now:</p>

<pre><code>// JavaScript Document
$(document).ready(function(){
    $("#main-menu a").click(function(e){
        e.preventDefault();

        var $a = $(this);
        var $clicked = $a.attr('href').substr(1);

        if($('#logo').hasClass('unmoved')) {
            $('#logo').animate({marginTop:'30px'}, 500, function(){
                $a.removeClass('unmoved').addClass('moved');
            }); 
        }

        $("#main-menu .active").removeClass('active');
        $a.addClass('active');

        if($('#content ul li.' + $clicked).length == 0) {
            $.ajax({
                url: '/resources/ui' + $(this).attr('href') + '.php',
                cache: false
            }).done(function(html) {
                if($('#content ul').html().trim().length == 0) {
                    $("#content ul").html(html).find('li').slideDown(500);
                } else {
                    $("#content ul").css('width',($("#content ul").width() + 900) + 'px');
                    $('#content ul').append(html).find('li.' + $clicked);
                    $a.trigger('click');
                }
            });
        } else {
            $('#content ul').animate({left:-$('#content ul li.' + $clicked).index() * 900 + 'px'}, 500, 'easeInQuart');
        }

    });
});
</code></pre>

<p>Right now everything works ok if you press the links in order: About us / Portofolio / Contact but if you start with Portofolio link and then you press About us.. you'll see that About us is after Portofolio but it must be before it.. I want to set it's index from the start..</p>

<p>When I load it I want to set About us at index 0, Portofolio 1 and Contact 2 without being dependent if one of these three links has been pressed before</p>

<p>Is there a solution? or I have to do it in hard way?</p>
