jquery... bild an pfd und txt Dateien hängen.

[Pinzz]

Hallo

Bin jQuery Newbie und hab eine vermeintlich einfache Frage. ... denk ich auf jeden Fall ;-)

Ich möchte an verschiedene Links, abhängig ihrer File-Extension Icons anhängen.

Falls der Link
<a href="datei.pdf">Dokument(pdf)</a>

oder
<a href="datei.txt">Textdatei(txt)</a>
setze ein Icon vor den Text innerhalb des a-Tags.

Das wäre das gewünschte Resultat:
<a href="datei.pdf"><img src="pdf-icon.png" />Dokument</a>

Ich strauchle an zwei Stellen. Erstens finde ich nur eine Funktion wie ich den Text innerhalb der a-Tags abfragen kann und zweitens die korrekte Platzierung der Bilddatei. Soll ja innerhalb der a-Tags vor den Text platziert werden.

Da bis jetzt die Extension im Filename war funktionierte bis anhin mal das a:contains, aber nach Platzierung der Icons möchte ich im Filenamen natürlich kein (pdf) mehr stehen haben, so funzt dann die Abfrage auch nicht mehr.
$('a:contains(pdf)').append('<img class="pdf-icon" src="icon_pdf.png" />');

Kann da jemand einem jQuery Newbie helfen?
Herzlichen Dank
Pinzz

[Gunnar Bittersmann]

@@Pinzz:

nuqneH

Ich möchte an verschiedene Links, abhängig ihrer File-Extension Icons anhängen.

Wenn du die File-Extensions tatsächlich im URI hast*, brauchst du kein JavaScript. Du kannst den Attributselektor nutzen und das Icon als Hintergrundbild einbinden (CSS-Sprites bieten sich an):

a[href$='.pdf']  
{  
  background: url(pdf-icon.png) no-repeat;  
  padding-left: 42px;  
}

Qapla'

* was man dank MultiViews nicht haben muss und vielleicht auch nicht haben sollte

[Pinzz]

Das wäre ein Ansatz, geht in meinem Fall aber nicht, da die Links schon mit einem Backgroundfile (spezielle Unterschreichung) versehen sind.

Den Tipp merk ich mir trotzdem.

Danke

[Gunnar Bittersmann]

@@Pinzz:

nuqneH

Das wäre ein Ansatz, geht in meinem Fall aber nicht, da die Links schon mit einem Backgroundfile (spezielle Unterschreichung) versehen sind.

Geht nicht gibt’s nicht.

Zum einen kannst du (bei modernen Browsern) mehrere Hintergrundbilder für ein Element angeben. Zum anderen kannst du für das Icon ein Pseudoelement generieren (bei IE < 8 mit CSS-Expression).

Qapla'

[Pinzz]

Super... die Option mit mehreren Bildern war mir nicht bekannt und sollte für dieses Projekt auch eine machbare Option sein.

Herzlichen Dank
Pinzz

[suit]

Das wäre ein Ansatz, geht in meinem Fall aber nicht, da die Links schon mit einem Backgroundfile (spezielle Unterschreichung) versehen sind.

Du kannst aber denselben CSS-Selektor auch in jQuery verwenden.

[suit]

Wenn du die File-Extensions tatsächlich im URI hast*, brauchst du kein JavaScript. Du kannst den Attributselektor nutzen und das Icon als Hintergrundbild einbinden (CSS-Sprites bieten sich an):

Alternativ geht natürlich auch ein type-Attribut - und wenn wenn mehrere Hintergrundbilder nicht möglich sind, lässt sich auch mit ::before oder ::after entsprechend ein Bild einfügen, das geht dann auch in etwas ältereren Browsern.

[Gunnar Bittersmann]

@@suit:

nuqneH

und wenn wenn mehrere Hintergrundbilder nicht möglich sind, lässt sich auch mit ::before oder ::after entsprechend ein Bild einfügen, das geht dann auch in etwas ältereren Browsern.

Sag ich doch. Ich auch an noch etwas älterere Browser hab ich gedacht.

Qapla'

[Matthias Apsel]

Om nah hoo pez nyeetz, Pinzz!

ergänzende Lektüre:
* CSS-Sprites
* multiple Hintergründe
* Unterschied Tag - Element

Matthias