jQuery / Javascript Conditional Statement

[FootieJonesy]

Hi

I am learning jQuery and I have a function which adds an image to a link depending on the file type.

$("document").ready(function(){

$('#content a[href$="pdf"]').addClass("pdf");
$('#content a[href$="xls"]').addClass("xls");
$('#content a[href$="doc"]').addClass("word");
$('#content a[href$="ppt"]').addClass("ppt");
});


Straightforward enough.

I need help with how to write a statement that says....if there is no file extension - leave the default styling, if not add file extension. At the moment I have dots and images...see here http://www.theoldcourthousesurgery.n..._us/index.shtm

Thanks

[Yi.Sage]

why not define a default css on the link?

like

<a href="#" class="file">link</a>
#content a.file { background-image:url(xxx);}

and define the special css class.
#context a.pdf { background-image:url(xxx) !important;}
#context a.xls{ background-image:url(xxx) !important;}

[FootieJonesy]

Thanks , I appreciate it can be done soley in CSS but I am learning jQuery I would like to apply the techniques.

Using jQuery means that I don't have to apply a class to the links, if I could get the syntax correct for a conditional statement, then I am sure I have the answer

[paul_wilkins]

I need help with how to write a statement that says....if there is no file extension - leave the default styling, if not add file extension. At the moment I have dots and images...

Would it be more correct to that that you want to replace the existing bulletpoint with an image instead?

Here's a picture of what I think you are wanting.



Is that correct?

To achieve that, you need to update the list item bulletpoint itself. That's done with the list-style-image property of CSS.

The way to do that is to use a class name on the LI element, which allows you to affect the bulletpoint of that list item.

#content li.pdf {
	list-style-image: url(/i/symbols/pdf.gif);
}

Apply the desired style to the list item, and you're all set.

$('#content a[href$="pdf"]').parent('li').addClass('pdf');

[samanime]

You could do it without any class, then let that be overridden with each one.

So, you just do something for "#content a". No need for a class.

For jQuery though, what you'd want to do is something like:

$('#content a').addClass('default');
$('#content a[href$='pdf']).removeClass('default').addClass('pdf');
// etc

That'd be the most jQuery specific approach for that.

[FootieJonesy]

Thanks

@paul_wilkins your example works although I am not entirely sure why!

@samanime - I understand why your example should work but it doesn't!!!

[FootieJonesy]

@samanime - just solved the problem..thanks!

[paul_wilkins]

@paul_wilkins your example works although I am not entirely sure why!

Bullet points are produced by the list items. If you don't want bullet points to be shown, or you want to replace them with something else such as an image, the target of your attention has to be on the list items themself.

Does that help somewhat?

[FootieJonesy]

@paul_wilkins - yes it does help, I just needed to fully understand how the parent selector works and after a bit of reading I do now. Thanks