Michał Wachowski programista php & webdeveloper

By dodać własny selektor w jQuery autorzy jak zwykle poszli na rękę (wg mnie porządnie na nią nadepneli) i dali do tego specjalną metodę. Cztery argumenty, z czego dwa są tablicami... po co?

$.expr[':'].mySelector = function(objNode, intStackIndex, arrProperties, arrNodeStack) {
		// implementacja selektora
};

W prototypie implementacja jest prostsza i można z powodzeniem korzystać z dokumentacji Sizzle, z tą różnicą, że w dokumentacji piszą Sizzle.foo, a w prototype pisać pełną ścieżkę gdzie Sizzle się znajduje Prototype.Selector.engine.selectors.foo. Dla jasności - dotyczy nas Extension Api.

Kamil na swoim blogu w ramach przykładu tworzył pseudoselektor :external, wykonującego co następuje:

• Tylko obiekty a lub link
• z atrybutem rel="external"
• z wpisanym atrybutem href
• prowadzące do zewnętrznej domeny

Więc, by stworzyć dla prototype taki pseudoselektor trzeba dodać do Sizzle filtr sprawdzający czy element spełnia nasze warunki.

Prototype.Selector.engine.selectors.filters.external = function(elem) {
	return elem.tagName.match(/^a|link$/i) && elem.href && elem.rel.match(/external/i) && elem.href.search(window.location.hostname) === -1;
};

Była definicja i wywołanie mające wykonać usuń wszystkie linki zewnętrzne, które prowadzą do Twittera lub Google+:

$$('a:external[href*=plus.google.com]', 'a:external[href*=twitter.com]').invoke('remove');

Jeśli trzeba zrobić selektor bardziej rozbudowany, można z powodzeniem korzystać z normalnej składni prototype, obiekt przekazywany do filtra jest już rozszerzony.
Przykładowo, pseudoselektor :visible, który zwraca widoczne elementy. Gdzie widoczne należy rozumieć jako znajdujące się obecnie w oknie przeglądarki i nie będące w jakiś sposób ukryte.

Prototype.Selector.engine.selectors.filters.visible = function(elem) {
	if(elem.style.display == 'none' || elem.style.visibility == 'hidden' || elem.style.opacity == 0) {
		return false;
	}

	var view = [document.viewport.getDimensions ['width'], document.viewport.getDimensions ['height']];
	var offsets = document.viewport.getScrollOffsets ;
	var pos = elem.viewportOffset ;

	if(pos[0] >= offsets[0] && pos[0] <= offsets[0]+view[0] && pos[1] >= offsets[1] && pos[1] <= offsets[1]+view[1]) {
		return true;
	}

	return false;
};

I na koniec ciekawostka - jeśli nie podoba ci się Sizzle w prototype.js - można bez problemu wymienić mechanizm selektorów na inny.