Question

I have a questions.
I search for a solution for these.
Wanna use el with child function.
But didn’t work sofar.
If i clear the el it works but then i have all elements class last.

Mootools Script

 $$('ul#portfolio li, .ce_id').each(function(el) {  
                    if(!el.hasClass(filterVal)) {  
                        el.fade('out').setStyle('display', 'none').addClass('hidden');

                    } else {  
                      el.setStyle('display', 'block').fade('in').removeClass('hidden');
                      $$(el':nth-last-child((4n+4)').addClass('last');
                    } 

Hope you guys can help me. Or its not possible to use el or VAR with :nth-last-child together?

Update: But didn’t work.

              else {  
               el.setStyle('display', 'block').fade('in').removeClass('hidden');
               el.getElements(':nth-last-child(4n+4)').addClass('last');
             }

Update 2:

Here the Code
So i want when i click on print that every 4 li witch not hidden and has the class witch clicked get the class last.
http://jsfiddle.net/6whd9/1/

Best reagards

Answer 1

I’m cutting down on the code a bit, but you cant but the el in the selector. Instead you should use el.getChildren or el.getElements. Here is an example:

$$('#parent > div').each(function(el){
    el.getChildren(':nth-last-child(4n+4)').addClass('last');
});

Here is a working example: http://jsfiddle.net/ZxMUh/

Edit: It’s really hard to understand from your question what works and not. However, if you try to animate you can not just fade it in. You need to hide it first.

$$('#parent div.hidden').fade('hide');


$$('#parent > div').each(function (el) {
    el.removeClass('hidden').fade('in');
    el.getChildren(':nth-last-child(4n+4)').addClass('last');
});

Here is the example: http://jsfiddle.net/ZxMUh/2/

Edit (After getting the fiddle): In my example I thought you where changing the nth-child in the “li”. The problem is that you can’t do it in your each-statement. Do it separate.

Here is fiddle when using :nth-last-child: http://jsfiddle.net/6whd9/2/

However, is’t not probably going to do what you want, and it’s not really possible to use the :nth-child in this case. You have to make the selection by your self.

 var visable = $$('ul#portfolio li:not(.hidden)').reverse();
 visable.each(function (item, index) {
     // same as 4n + 4
     if (index % 4 == 3) {
         item.addClass('last');
     }
 });

Here is a fiddle demonstrating it: http://jsfiddle.net/6whd9/4/
(I added the last class to the style with a solid red border so it would be visable)

I hope I finally understood your question…