Getting all visible elements using MooTools
I am moving from jQuery to MooTools (for the fun..) and I have this line of code :
$subMenus = $headMenu.find('li ul.sub_menu:visible');
How I can write this in mootools?
I know that I can use getElements but How I can check for visible ul?(I am using this(:visible) selector a lot).Edit -
I implemented my own function :
function findVisibleElements(elementsCollection){
var returnArray = [];
elementsCollection.each(function(el){
if(el.getStyle('display') === 'block'){
returnArray.push(el);
}
});
retu开发者_StackOverflow中文版rn returnArray;
}
And what i want is to slide up all the visible sub menu, this is what I wrote :
// Sliding up the visible sub menus
if( visibleSubMenus.length > 0 ){
visibleSubMenus.each(function(el){
var slider = new Fx.Slide(el, {duration: 2000});
slider.slideOut();
});
}
Why my code isn`t working?My function is working, and the problem is with the Fx.Slide.
I added mootools more with Fx.Slide.Just extend the selector functionality - it's MooTools!
$extend(Selectors.Pseudo, {
visible: function() {
if (this.getStyle('visibility') != 'hidden' && this.isVisible() && this.isDisplayed()) {
return this;
}
}
});
After that just do the usual $$('div:visible')
which will return the elements that are visible.
Check out the example I've created: http://www.jsfiddle.net/oskar/zwFeV/
The $$()
function in Mootools is mostly equivalent to JQuery's $()
does-it-all selector.
// in MooTools
var elements = $$('.someSelector');
// natively in most newer browsers
elements = document.body.querySelectorAll('.someSelector');
However, for this specific case since :visible isn't a real pseudo class, you'll have to approximate it using an Array filter in Mootools.
var isItemVisible = function (item) {
return item.style.visibility != 'hidden' && item.style.display != 'none';
}
var elements = $$('ul').filter(isItemVisible);
There might be other things that you consider make an item 'invisible', in which case you can add them to the filtering function accordingly.
精彩评论