Adding Menu separator Bars with jQuery.

I had a website whose menu items were loaded from different file blocks and cms static blocks. So, I decided to use jQuery for this purpose. So here is my menu.

<div class="quick-access">
    <div class="topLinks">
        <ul class="links">
            <li class="first">
                <a title="Goto Homepage." href="http://technooze.com/">Home</a>
            </li>
            <li>
                <a title="Find the store near you." href="http://technooze.com/store-locator">Store Locator</a>
            </li>
            <li>
                <a title="Contact us for anything you need help with." href="http://technooze.com/contacts">Contact Us</a>
            </li>
            <li>
                <a title="Get the latest deals straight on to your emails." href="http://technooze.com/specials">Sign up for our latest Specials</a>
            </li>
            <li>
                <a title="Click here to goto My Account area." href="http://technooze.com/customer/account/">My Account</a>
            </li>
            <li>
                <a title="Click here to Login and get members only specials." href="http://technooze.com/customer/account/login/">Log In</a>
            </li>
        </ul>
    </div>
</div>

So, I used jQuery function to insert separators like this:

<script type="text/javascript">
    (function ($) {
        $('div.quick-access div.topLinks ul.links').children('li').each(function () {
            $('<li class="bar">|</li>').insertBefore($(this).next('li'));
        });
    })(jQuery);
</script>

That will add "<li class="bar">|</li>" after every LIs except first one.

and, this is my css:

.header .quick-access .links li.bar {
    color: #FFCC00;
    line-height: 34px;
    margin: 0;
    padding: 0 10px;
}

Update: Today I had to add separator again to another menu but it had no LIs but DIVs. That's not the issue exactly but menu items were separated with some other hidden div blocks which contained sub-menus. So, jQuery next() function didn't work. So tried with jQuery's :first selector and it worked as expected. So this is my new script.

$('#custommenu').children('div.menu').not(':first').each(
    function () {
	    $('<div class="bar">|</div>').insertBefore($(this));
    }
)