jQuery help with .each function
<p><strong>UPDATE 4:</strong></p>

<p>This is what I have at the moment:</p>

<pre><code>var $elements = $('.dropdown');
var $lastElement = $elements.last();

$elements.slice(0, -1).each(function() {
    $(this).css('left', $(this).prev.position().left);
});

var $prev = $lastElement.prev();
$lastElement.css('left', $prev.position().left - ($prev.outerWidth() - $lastElement.outerWidth()));
</code></pre>

<p>Which is giving me:</p>

<pre><code>Uncaught TypeError: Object function (d,e){var f=c.map(this,b,d);Za.test(a)||(e=d);if(e&amp;&amp;typeof e==="string")f=c.filter(e,f);f=this.length&gt;1?c.unique(f):f;if((this.length&gt;1||ab.test(e))&amp;&amp;$a.test(a))f=f.reverse();return this.pushStack(f,a,bb.call(arguments).join(","))} has no method 'position'
$.ajax.success homepage.htm:138
c.b.extend.each jquery.min.js:33
c.b.fn.b.each jquery.min.js:26
$.ajax.success homepage.htm:137
c.extend.handleSuccess jquery.min.js:142
c.extend.ajax.L.w.onreadystatechange jquery.min.js:141
</code></pre>

<p>So something in the above script does not have a position method.</p>

<hr>

<p><strong>UPDATE 3:</strong></p>

<p>This is what I have at the moment:</p>

<p>var $elements = $('.dropdown');
var $lastElement = $elements.last();</p>

<p>$elements.slice(0, -1).each(function() {
    $(this).css('left', $(this).prev.position().left);
});</p>

<p>var $prev = $lastElement.prev();
$lastElement.css('left', $prev.position().left - ($prev.outerWidth() - $lastElement.outerWidth()));</p>

<p>It's giving me a <code>function required</code> error.  When I take out the last 2 lines, the error disappears, but the problem does not get solved.</p>

<hr>

<p><strong>UPDATE 2:</strong></p>

<p>This is the HTML structure:</p>

<pre><code>&lt;div class="settings"&gt;&lt;span id="spanSettings"&gt;Settings ▼&lt;/span&gt;&lt;/div&gt;
&lt;div class="dropdown"&gt;
    &lt;a href="edit_profile.aspx"&gt;&lt;div class="item"&gt;&lt;div class="icon" style="background-image: url('http://intranet/img/profile_icon.png');"&gt;&lt;/div&gt; Edit profile&lt;/div&gt;&lt;/a&gt;
    &lt;a href="manage_tabs.aspx"&gt;&lt;div class="item"&gt;&lt;div class="icon" style="background-image: url('http://intranet/img/tabs_icon.png');"&gt;&lt;/div&gt; Tab settings&lt;/div&gt;&lt;/a&gt;
&lt;/div&gt;
</code></pre>

<hr>

<p><strong>UPDATE 1:</strong></p>

<p>With: <code>$(this).css('left', $(this).prev().position().left);</code></p>

<p>I get <a href="https://docs.google.com/leaf?id=0B1-CN3-vjUYvOGM1OTg2M2ItOWI2Yi00N2E4LWE4YWMtOGZmZjhmODhhYjIw&amp;hl=en_US" rel="nofollow">image 1</a>:</p>

<p>with: <code>$(this).css('right', $(this).prev().position().right);</code></p>

<p>I get <a href="https://docs.google.com/leaf?id=0B1-CN3-vjUYvOWQzYTk3ZWQtOGI3Yy00Mzc3LWIwMmItZDZlOWNmZjQ3YmIw&amp;hl=en_US" rel="nofollow">image 2</a> :</p>

<p>I am after <a href="https://docs.google.com/leaf?id=0B1-CN3-vjUYvYTY5ZGMxMzMtZTI4MS00M2ExLTk2YWEtNmRjMTlkZTk3NjZk&amp;hl=en_US" rel="nofollow">image 3</a>:</p>

<p>^ Image 3 is photoshopped.</p>

<hr>

<p><strong>ORIGINAL QUESTION:</strong></p>

<p>I have the following script which changes the position of any html element which has the class <code>dropdown</code></p>

<pre><code>$('.dropdown').each(function() {
    $(this).css('left', $(this).prev().position().left);
});
</code></pre>

<p>How do I modify this so it changes all the <code>dropdown</code>'s to left based on the parent, except the last one, which should be <code>right</code> aligned with the parents right position?</p>

<p>If that is not possible, how do I independently change their positions?  instead of using the <code>each</code> function?</p>
