Forum:Adding icons to the wiki navigation menu dropdowns with jQuery: opinions needed

I want to add game icons to the DLC links in the the top navigation drop downs on the BioShock Wiki. These icons would indicate which game each DLC is from and would replace the name of the game which currently appears in each link.
 * Premise

You can see what the drop down links currently look like on the BioShock Wiki. In the top navigation, mouseover "BioShock Series", then "Downloadable Content" to see the links I am referring to.

I've already created some jQuery code that can do this, and you can see it in action at my test wiki. (Mouseover "Menu icons test" then "Downloadable Content" to see the icons.)
 * The code

However, my code contains a lot of redundant sections, and I'd like to know whether there is a better way to do this. I'm a novice when it comes to JavaScript, so the code I made is probably very inefficient.

Please, if you have experience with JavaScript, give me your advice on how I could do this in a better way. --Gardimuer { ʈalk } 16:11, April 4, 2012 (UTC)


 * Well, I'm no expert at JS, but have you considered using CSS to add the icons? I'm sure a few ::before rules will add those icons fine. You'd have to get rid of the game name at the start, and wrap the dlc name in a span with a unique class. Of course, I generally use CSS in bad ways, so it may not be the best way to go.


 * The JavaScript looks fine to me. The way you correct the image placement is a little weird though. I would probably place the images in spans, format them as table cells and align the contents vertically:

--


 * Just an FYI... you should probably only do this if the skin = oasis. I was told that added HTML was the reasons for the navigation bugging for mobile devices. Also, you could have grabbed me in IRC. =p Rappy 22:24, April 4, 2012 (UTC)