Search code examples
mootoolselvarcss-selectors

el Child in each function


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


Solution

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