jquery... bild an pfd und txt Dateien hängen.
Pinzz
- javascript
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
@@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
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
@@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'
Super... die Option mit mehreren Bildern war mir nicht bekannt und sollte für dieses Projekt auch eine machbare Option sein.
Herzlichen Dank
Pinzz
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.
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.
@@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'
Om nah hoo pez nyeetz, Pinzz!
ergänzende Lektüre:
* CSS-Sprites
* multiple Hintergründe
* Unterschied Tag - Element
Matthias