Question

UPDATE 4:

This is what I have at the moment:

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()));

Which is giving me:

Uncaught TypeError: Object function (d,e){var f=c.map(this,b,d);Za.test(a)||(e=d);if(e&&typeof e==="string")f=c.filter(e,f);f=this.length>1?c.unique(f):f;if((this.length>1||ab.test(e))&&$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

So something in the above script does not have a position method.

---

UPDATE 3:

This is what I have at the moment:

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()));

It’s giving me a function required error. When I take out the last 2 lines, the error disappears, but the problem does not get solved.

---

UPDATE 2:

This is the HTML structure:

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

---

UPDATE 1:

With: $(this).css('left', $(this).prev().position().left);

I get image 1:

with: $(this).css('right', $(this).prev().position().right);

I get image 2 :

I am after image 3:

^ Image 3 is photoshopped.

---

ORIGINAL QUESTION:

I have the following script which changes the position of any html element which has the class dropdown

$('.dropdown').each(function() {
    $(this).css('left', $(this).prev().position().left);
});

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

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

Answer 1

You could do:

var $elements = $('.dropdown'),
    $lastElement = $elements.last();

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

$lastElement.css('right', $lastElement.prev().position().right);

Update: to align it as you showed in the picture (I assume it is about the last element), you could try:

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