I would be great if we discuss on all UI Components in Jquery like this.

Thanks a lot guys .Especially to Peter Bex for giving a much clean way…

Thanks a lot!

You might also want to take a look on event delegation in jquery:
http://dev.distilldesign.com/log/2008/jan/27/event-delegation-jquery/
http://www.danwebb.net/2008/2/8/event-delegation-made-easy-in-jquery

A ‘preview comment’ function would be nice


$('#langs li').click(function() {
$("#container div").hide();
var index = $('#langs').index(this);
$("#container div").get(index).fadeIn("slow");
});


It saves you from having to assign so many IDs. This also makes it easier if the HTML is generated by some CMS, so you don’t have to hack the code to output IDs.

Of course, it’ll only work if order of the list of links corresponds exactly to the divs like it is the case in this example.

Note it’s not necessary to prefix your ID with div like “div#container”, if they’re unique (and they must be unique or the HTML is invalid).

@Joe Grossberg
Both ways work, won’t be a big performance issue.

Thanks for the feedback guys, i’ve updated the first post with better code.

$(“ul#langs”).click(function (event) {
var id = $(event.originalTarget).text().toLowerCase();
$(“#container div”)
.hide()
.filter(“#” + id)
.fadeIn(“slow”);
});

(note that you were using same ID twice, for list item and div)

Instead, you should only attach an event listener on the ul only and then on the click event, find out which inner target element was clicked. That is how you would lower the amount of event listeners.

Also, you cant have mutliple elements on a single page share the same ID. This is invalid XHTML

You could change $(“div#container div#” + elid + “”).fadeIn(“slow”); to $(“div#container div#” + elid + “content”).fadeIn(“slow”); and append “content” to all of the div ids.

$(“div#container div#” + elid + “”)

instead of just

$(“div#container div#” + elid)

?

Have you ever had to develop something yourself only to find out that there had already been a plugin developed?

Don’t you enjoy dreaming about what you could have on your site and finding the right plugin right away?

Then you should find this lis…

That’s some great article. Of all the jQuery resources that I have collected, it is the only one that actually talks about writing better code.

Thanks.