jQuery selectors, generalising a selector by anchor ID -

I have found a code on my site that displays a list of articles on a blog (many of the following Object with the same category):

  & lt; Ul class = "article category1" & gt; & Lt; Li & gt; Etc. & lt; Li & gt; & Lt; / Ul & gt; & Lt; Ul class = "article category 2" & gt; & Lt; Li & gt; Etc. & lt; Li & gt; & Lt; / Ul & gt; & Lt; Ul class = "article category 3" & gt; & Lt; Li & gt; Etc. & lt; Li & gt; & Lt; / Ul & gt;  

I have some jQuery code that filters the list so that you can display only one category as follows:

  $ ("# Showall "). Click (function () {$ ("ul.article"). Show ('sharp');}); Click $ ("# Showcategory1") (function () {$ ("ul.article.category1"). Show ('sharp'), $ ("ul.aarticle") No. ("ul.category1"). Hiding ('Sharp');});  

When you click on the relevant link, i.e.

  & lt; An id = "showall" & gt; All & lt; / A & gt; & Lt; An id = "category 1" & gt; Category 1 & lt; / A & gt;  

Currently I have 9 categories to deal with and looks like 10 snippets of jQuery which are extremely inefficient (it is is very incompetent). I do not know how to normalize the code so that it takes the anchor ID (or perhaps class) and then applied it to the relevant listings Any help please?

Thank you!

You can normalize the code by working from the list of categories:

  $ ("# showall"). Click (function () {$ ("ul.article"). Show ('sharp');}); Var cats = "books of food cars"; $ .each (cats.split (""), function (cat) {$ ("# show" + cat). Click (function () {$ ("ul.article." + Cat) Show ('sharp '); $ ("Ul.article") No. ("ul." + Cat). Hyde (' sharp ');});});  

This does not change the runtime behavior, just reducing the amount of code required to create a task in the first place. The main idea here is that the jQuery selectors need to have a literal string No, they can be made from literals and variables.