Spaß mit jQuery

Das letzte meiner jQuery-Beispiele beschäftigt sich ja damit, externen Links ein Icon und target=”_blank” zu verpassen. Mit allem drum und dran umfasst die Funktion zehn Zeilen Code. Dank ein paar Tricks und der wunderbaren CSS-Selektor-Syntax, geht das ganze aber auch in einer einzigen Zeile:

$('#content .post a:not([href^="' + $('base').attr('href') + '"])[href^="http://"]').css('background', 'url(' + templateURL + 'img/shape_move_forwards.png) no-repeat right 1px').css('padding-right', '20px').attr('title', 'Externer Link').attr('target', '_blank');

Es werden also alle a-Element der Klasse “post” innerhalb der ID “content” angewählt, die nicht mit der Basis-URL, aber dafür mit “http://” beginnen. So wird sichergestellt, dass alle externen Links erwischt werden, aber z.B. relative interne Links (die TinyMCE gerne macht) oder ID-Aufrufe nicht betroffen sind.

Allen betroffenen Elementen wird nun das Icon als Hintergrundbild zugewiesen, ein entsprechendes Padding gesetzt, sowie das title- und target-Attribut.

Mit einer so effizienten und gleichzeitig einfachten Syntax zu arbeiten, macht einfach Spaß. Und so lange diese CSS-Selektoren noch nicht vollständig implementiert sind, hilft jQuery browser-unabhängig aus.