CODEWITHSUNDEEP
javascriptjquerymootools
greencoconut
greencoconut

Reputation:

Convert 4 lines of Jquery to Mootools

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

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>

Upvotes: 1

Views: 1275

Answers (2)

zombat
zombat

Reputation: 94147

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

Upvotes: 3

Itay Moav -Malimovka
Itay Moav -Malimovka

Reputation: 53597

$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

Upvotes: 0

Related Questions