jQuery - Move LI in UL based on class

Question

I have a treeview structure of my files. However, files an directories are now mixed up.

I've added a class named 'type_dir' to every directory, And 'type_file' to every file.

How can I make all 'type_file's move below all 'type_dir's in every UL?

Example:

<ul id="type_master">
    <li class="type_file">file</li>
    <li class="type_dir">folder
        <ul>
            <li class="type_file">file</li>
            <li class="type_dir">folder
                <ul>
                    <li class="type_file">file</li>
                </ul>
            </li>
        </ul>
    </li>
    <li class="type_file">file</li>
</ul>

And this needs to be:

<ul id="type_master">
    <li class="type_dir">folder
        <ul>
            <li class="type_dir">folder
                <ul>
                    <li class="type_file">file</li>
                </ul>
            </li>
            <li class="type_file">file</li>
        </ul>
    </li>
    <li class="type_file">file</li>
    <li class="type_file">file</li>
</ul>

Thank you in Advance!

Answer 1

Maybe something like...

$('#type_master, .type_dir').each(function(){
    var $container = $(this);
    $container.find('> .type_file').appendTo($container);
});

Though that doesn't work cleanly for the type_dir elements as that class is on the li instead of the ul. Can you move that tag to the nested ul's?