Modify the output of wp_nav_menu in a very specific way?

Question

I am trying to get wp_nav_menu to output something like this:

<div id="topMenu" class="spanningMenu noPrint">
    <ul>
        <li class="topMenuDivider"></li>
        <li><a href="#">Home</a></li>
        <li class="topMenuDivider">|</li>
        <li><a href="#>Contact Us</a></li>
        <li class="topMenuDivider">|</li>
        <li><a href="#>Services</a></li>
        <li class="topMenuDivider"></li>
    </ul>
</div>

I'm close, but I can't quite get there. This is what I've done so far, and the output I get:

Code:

    <?php 
        $defaults = array(
            'theme_location'  => 'Primary Menu',
            'menu'            => 'Primary Menu',
            'container'       => 'div',
            'container_class' => 'spanningMenu noPrint', 
            'container_id'    => 'topMenu',
            'fallback_cb'     => '',
            'after'           => '<li class="topMenuDivider">|</li>',
            'items_wrap'      => '<ul><li class="topMenuDivider"></li>%3$s<li class="topMenuDivider"></li></ul>',

        );

        wp_nav_menu($defaults);

    ?>

Result:

<div id="topMenu" class="spanningMenu noPrint">
    <ul>
        <li class="topMenuDivider"></li>
        <li id="menu-item-51" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-2 current_page_item menu-item-51"><a href="#">Home</a>
            <li class="topMenuDivider">|</li>
        </li>
        <li id="menu-item-50" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-50"><a href="#">Contact Us</a>
            <li class="topMenuDivider">|</li>
        </li>
        <li id="menu-item-49" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-49"><a href="#">Services</a>
            <li class="topMenuDivider">|</li>
        </li>
        <li class="topMenuDivider"></li>
    </ul>
</div>

So there are three things I still need to do, and I have no idea how to do them:

1. Get rid of all the id and class tags on the li, I'm not sure where these are being generated.
2. Somehow get the "[li class="topMenuDivider"]|[/li]" to appear after the closing li rather than before it.
3. Get rid of the last li that inserts a |

Is this possible?

Edit:

I have solved #2 by changing these lines as follows. It's kind of a hack, but it works:

            'after'           => '</li><li class="topMenuDivider">|',
            'items_wrap'      => '<ul><li class="topMenuDivider"></li>%3$s<li class="topMenuDivider"></li></ul>',

Answer 1

Take a look here for #1: remove li class & id for menu items and pages list

Regarding items #2 and #3, why not just do this with CSS? The separators shouldn't be in their own <li> tags anyway. The following CSS will add a | after each menu item, except the last.

#topMenu ul li a:after {
  content: "|";
  display: inline-block;
  margin-left: .618em;
  width: 1em;
}
#topMenu ul li:last-child a:after {
  display: none;
}