jquery selector for selected siblings of a common parent
<p>I have a menu structure as follows:</p>

<pre><code>&lt;li&gt;&lt;a href="#" class="navCars"&gt;Cars&lt;/a&gt;&lt;img src="images/navbar-menu-divider.png" class="divider"&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#" class="navTrucks"&gt;Trucks &lt;img src="images/navbar-menu-down-arrow.png/"&gt;&lt;/a&gt;&lt;img src="images/navbar-menu-divider.png" class="divider"&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#" class="navBoats"&gt;Boats &lt;img src="images/navbar-menu-down-arrow.png/" class="menu_arrow"&gt;&lt;/a&gt;&lt;img src="images/navbar-menu-divider.png" class="divider"&gt;&lt;/li&gt;
</code></pre>

<p>For the Trucks and Boats items which support a dropdown, I need to change the .divider images to the left and right of a given menu item on mouse over.  I've tried this selector to grab the right side:</p>

<pre><code>$( ":parent .divider", this ).attr( "src", "images/navbar-menu-hover-right.png" );
</code></pre>

<p>Which doesn't seem to work.  To get the left side, I need to go up a level, find the previous sibling, then get its .divider (though I'm sure there are several alternatives).</p>

<p>Any help from jquery magicians appreciated!</p>
