Filip Klar web developer blog

W jQuery mamy do wykorzystania przydatny selektor :empty. Możemy go zastosować do wybierania ze struktury strony elementów, które niczego nie zawierają. I tak bez problemu podziałamy na np. elementach div bez treści.

Intuicyjnie tworząc bardziej skomplikowane formularze dla swoich użytkowników aż kusi, aby wykorzystać

$('input:empty')

bądź

$('textarea:not(:empty)')

I tu jest pies pogrzebany. To wcale nie zadziała, mimo że wydaje się, iż działać powinno. Warto sobie uzmysłowić, że zwykłe pole tekstowe (input[type=”text”]) nie może wewnątrz siebie mieć jakiejkolwiek zawartości, gdyż nie ma osobnych tagów otwarcia i zamknięcia (oczywiście jest to możliwe przy nieprawidłowej składni, ale o tym nawet nie myślmy). Wychodzi więc na to, że z punktu widzenia selektora :empty pojedyncze pola są zawsze puste, nawet gdy mają wpisaną treść. Nie wierzycie? To sprawdźcie sami: http://jsfiddle.net/w816d540/. Wszystko przez to, że zmienia się wyłącznie atrybut value.

Z pomocą przychodzi nam funkcja filter(), dzięki której sami napiszemy własną funkcję do filtrowania. Aby ukryć puste pola, skorzystamy z kodu:

$('input').filter(function() { return $(this).val().length == 0; }).hide();

I po problemie. To zadziała tak, jakbyśmy oczekiwali po :empty dla pól formularza. Zadajmy sobie jednak więcej trudu i zdefiniujmy własny selektor, który wyręczy nas w kopiowaniu (przy takiej konstrukcji łatwo przecież o pomyłkę i co za tym idzie błędy w powtarzaniu tej części kodu).

Nasz nowy selektor nazwiemy unfilled, a jego zawartość będzie bazowała na poprzednim zapisie, czyli:

return $(this).val().length == 0;

Tłumacząc na polski, zwracane będą elementy, których wartość ma długość dokładnie zera znaków. Obudujmy to teraz w definicję selektora:

jQuery.extend(jQuery.expr[':'], { 'unfilled': function(e) {
	return jQuery(e).val().length == 0;
}});

Odtąd zamiast konstrukcji z filter() użyjemy:

$('input:unfilled').hide();

Z kolei jeśli chcielibyśmy wykonać odwrotną akcję, czyli odsłonić na ekranie wypełnione pola, zrobimy to w ten sposób:

$('input:not(:unfilled)').show();

Proponuję jednak rozszerzyć sobie jQuery jeszcze o :filled (długość wartości większa od zera):

jQuery.extend(jQuery.expr[':'], { 'filled': function(e) {
	return jQuery(e).val().length > 0;
}});

Uprości nam się wtedy ten sam kod do postaci:

$('input:filled').show();

Oczywiście tak utworzone selektory bez problemu zadziała z fukcją:

$(this).is(':filled')

Z pewnością przyda się to do walidacji. Dla własnych potrzeb możecie sobie takich “skrótów” tworzyć ile potrzebujecie, a ogranicza Was wyobraźnia.

Przy okazji – ciekawi mnie czy idzie jakoś lepiej spolszczyć wyraz selector? Czy nazwa “wybierak” przyjęłaby się w tym kontekście w technologiach internetowych?