Convert 4 lines of Jquery to Mootools

Question

Hi,

The following lines of code do two things. The first two lines add classes to the siblings immediately before and after an element with a given id (in this case a UL with id "nav")

The last two lines add the classes first and last to the first and last sibling elements whose parent has the id "nav".

This is jquery. How would I achieve the same with Mootools 1.11. Any help appreciated.

$('#nav .active').prev().addClass('prevtab');
$('#nav .active').next().addClass('nexttab');
$('#nav').children(":first").addClass('first');
$('#nav').children(":last").addClass('last');

Answer 1

Give this a shot.

$('nav').getNext().addClass('nexttab');
$('nav').getPrevious().addClass('prevtab');
var c = $('nav').getChildren();
c[0].addClass('first');
c[c.length-1].addClass('last');

Edit: Working now.

Second/Third edits:

Ok, I misunderstood the way you're using the .active class. Try this:

var n = $('nav').getElement('.active').getNext();
if (n) n.addClass('nexttab');
var p = $('nav').getElement('.active').getPrevious();
if (p) p.addClass('prevtab');
var c = $('nav').getChildren();
c[0].addClass('first');
c[c.length-1].addClass('last');

Answer 2

$each($$('#nav .active'),function(item){
                            item.getPrevious().classname='prevtab';
                         }
      );

This is the first line.

Second you can use getNext
Third you can use $('#nav').getFirst //make sure it has children....
Fourth you can use getLast

Answer 3

Thank you very much for the help guys.

Unfortunately neither answers seems to work. Not sure if it makes any difference, but I need to use mootools 1.1

Answer 4

formatting doesn't work in comments so repeating for zombat:

Using mootools 1.1 There is no edit button available to me, and I can't comment as I don't have enough rep.

Your solution is doing something, but not targeting the correct element.

This is the result I want and am getting with jquery:

<ul id="nav">
<li class="first"></li>
<li></li>
<li class="prevtab"></li>
<li class="active"></li>
<li class="nexttab"></li>
<li class="last"></li>
</ul>

This is the result of your js:

<div class="prevtab"></div>
<ul id="nav">
<li></li>
<li></li>
<li></li>
<li class="active"></li>
<li></li>
<li></li>
</ul>
<div class="nexttab"><div>

Answer 5

No other way to comment (terrible UX), so thanking as an answer.

Thank you very very much zombat. I really appreciate your assistance with this. Your final edit worked perfectly.I'll be back later to select your answer.

Again, thank you very much. Appreciate you taking the time to help.

Cheers