Blog Logo Screenlight Blog

Custom Selectors mit jQuery

customSelectors

jQuery's DOM Selector Engine mit eigenen Selektorfunktionen erweitern.

jQuery bietet zum Selektieren von DOM Nodes nebst CSS3 Selektoren einige erweiterte Selektoren wie z.B. :button, :even, :input, etc., die beim Auswählen von Elementen Abhilfe schaffen. So selektiert :button sowohl Button Tags wie auch Input Tags vom Typ “button”.

Über $expr[":"] bietet jQuery eine Schnittstelle, um die Selector Engine mit eigenen Selectors zu erweitern. So lassen sich komplexe Filterfunktionen als Selektor zusammen mit den existieren Selektoren auf den DOM anwenden.

$(".people:not(:pretty)").hide();

Durch Erweiterung von $expr[":"] lässt sich beispielsweise ein Selektor erstellen, der nur auf Nodes matcht, die höher als 64px sind und sich mit :tall anwenden lässt.

$.expr[":"].tall = function (obj, index, meta, stack) {
 return ( $(obj).height() > 64 );
};

Über das dritte Element des meta Funktionsarguments kann auf an den Selektor übergebene Parameter zugegriffen werden, um parameterabhängige Selektoren zu erstellen.

$.expr[":"].continent = function (obj, index, meta, stack) {
 return ( $(obj).data("continent") === meta[3] );
};

Random Selector Yeahh!!

$.expr[":"].random = function () { return !!((Math.random() * 2) | 0) };

Hier einige sinnvolle Selektoren:

$.expr[":"].landscape = function (obj) {
 var $el = $(obj);
 return ( $el.width() / $el.height() >= 1 );
};

$("img:landscape").show();
$.expr[":"].block = function (obj)  <a href="http://www.deutschgluecksspiel.de/">online casino  {
</a>  return $(obj).css("display") === "block");
};

$("img:block").css("border", "2px solid magenta");
$.expr[":"].below = function (obj, index, meta) {
 var offset = $(obj).offset();
 return ( offset.top > meta[3] );
};

$(":below(500)").hide();
$.expr[":"].aspectRatio = function (obj, index, meta, stack) {
 var aspect = meta[3].split(":");
 var $el = $(obj);
 return ( $el.width() / $el.height() === aspect[0] / aspect[1] );
};

$("img:aspectRatio(16:9)").css("background-color", "magenta");

Folgender Code Pen zeigt an Hand eines Beispiels, wie eigene Selektoren angwednet werden können.

$(".building:tall").addClass("highlight");
$(".building:continent(Asia)").addClass("highlight");

[CodePen height=450 show=result href=pKACo user=maxkueng ]

Performance Issues

jQuery verwendet für CSS3-kompatible Selektoren die native querySelectorAll() Methode des Browsers. Diese ist deutlich schneller als jQuery”s Selector Engine. Um Performance Einbussen zu vermeiden sollte deshalb, sofern möglich, ein CSS3 Selector abgesetzt werden, um dann die einenen Selektoren mit filter() auf einer verkleinerten Collection anzuwenden. Dies gilt auch für die erweiterten Selektoren, die bereits in jQuery integriert sind.

$("form.magic li img").filter(":landscape").css("border", "1px solid red");

Leave a Response

2 Responses to “Custom Selectors mit jQuery”

LS
July 19th, 2013 at 1:01 pm

Coole Sache!;) Meta-Programming ist modern…oder so. Performancerkritische Sachen würd ich glaub anders lösen…aber als proof-of-concept ganz nett!

July 22nd, 2013 at 7:55 am

Toller post – danke :)