Custom class to allow all of its methods to be used with any Selectors element via the dollar function $.
Gets all the elements within an element that match the given selector.
var myElements = myElement.getElements(selector);
- selector - (string) The CSS Selector to match.
- (array) An Element collection.
//Returns all anchors within myElement.
$('myElement').getElements('a');
//Returns all input tags with name "dialog".
$('myElement').getElements('input[name=dialog]');
//Returns all input tags with names ending with 'log'.
$('myElement').getElements('input[name$=log]');
//Returns all email links (starting with "mailto:").
$('myElement').getElements('a[href^=mailto:]');
//Adds events to all Elements with the class name 'email'.
$(document.body).getElements('a.email').addEvents({
'mouseenter': function(){
this.href = 'real@email.com';
},
'mouseleave': function(){
this.href = '#';
}
});
-
Supports these operators in attribute selectors:
- '=' : is equal to
- '*=': contains
- '^=' : starts-with
- '$=' : ends-with
- '!=' : is not equal to
- '~=' : contained in a space separated list
- '|=' : contained in a '-' separated list
Same as Element:getElements, but returns only the first.
var anElement = myElement.getElement(selector);
- selector - (string) The CSS Selector to match.
- (mixed) An extended Element, or null if not found.
var found = $('myElement').getElement('.findMe').setStyle('color', '#f00');
Some default Pseudo Selectors for Selectors.
Matches all Elements that are checked.
':checked'
$$('*:checked')
$('myForm').getElements('input:checked');
Matches all Elements that are enabled.
':enabled'
$$('*:enabled')
$('myElement').getElements(':enabled');
Matches all elements which are empty.
':empty'
$$('div:empty');
Matches all the Elements which contains the text.
':contains(text)'
- text - (string) The text that the Element should contain.
$$('p:contains("find me")');
Matches every nth child.
Nth Expression:
':nth-child(nExpression)'
- nExpression - (string) A nth expression for the "every" nth-child.
$$('#myDiv:nth-child(2n)'); //Returns every even child.
$$('#myDiv:nth-child(n)'); //Returns all children.
$$('#myDiv:nth-child(2n+1)') //Returns every odd child.
$$('#myDiv:nth-child(4n+3)') //Returns Elements 3, 7, 11, 15, etc.
Every Odd Child:
':nth-child(odd)'
Every Even Child:
':nth-child(even)'
Only Child:
':nth-child(only)'
First Child:
'nth-child(first)'
Last Child:
'nth-child(last)'
This selector respects the w3c specifications, so it has 1 as its first child, not 0. Therefore nth-child(odd) will actually select the even children, if you think in zero-based indexes.
Matches every even child.
':even'
$$('td:even');
This selector is not part of the w3c specification, therefore its index starts at 0. This selector is highly recommended over nth-child(even), as this will return the real even children.
Matches every odd child.
':odd'
$$('td:odd');
This selector is not part of the w3c specification, therefore its index starts at 0. This selector is highly recommended over nth-child(odd), as this will return the real odd children.
Matches the first child.
':first-child'
$$('td:first-child');
Matches the last child.
':last-child'
$$('td:last-child');
Matches an only child of its parent Element.
':only-child'
$$('td:only-child');