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
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...