How to optimize jQuery code

Question

I am using jQuery's collapsible lists grouped and named #List01, #List02, #List03, etc.. My java script code captures clicks on list elements and remembers list item's id for further processing. Each group has identically looking code so I was wondering how could I encapsulate it in one function.

Here is the code:

    $(document).on('click', '#List01 li', function ()
    {
        var anchor = $(this).find('a');
        sessionStorage.KenID = anchor.attr('id');
        changePage();
    });
    $(document).on('click', '#List02 li', function ()
    {
        var anchor = $(this).find('a');
        sessionStorage.KenID = anchor.attr('id');
        changePage();
    });
    $(document).on('click', '#List03 li', function ()
    {
        var anchor = $(this).find('a');
        sessionStorage.KenID = anchor.attr('id');
        changePage();
    });

Thanks for your ideas! Jacek

why dont just use class as jquery selector since the function have no relation with it?
Ask at code-review, this is off-topic here. when you do it, delete this post.
with jquery i don't thinks its anymore posible just find leaks in your code, optimize by hand and make it in one file and exucute part of code only on page, where it needs, for example many site have lots of jquery code running on every page, if page url is xyz then run this code only, and you should try clouse compiler to optimize it and use zepto instead of jquery (if you can afford),

hjpotter92 · Accepted Answer · 2013-04-10 05:22:10Z

up vote 0 down vote accepted

$(document).on('click', '#List01 li, #List02 li, #List03 li', function () {
        var anchor = $(this).find('a');
        sessionStorage.KenID = anchor.attr('id');
        changePage();
});

The , should do the trick.

answered Apr 10 at 5:22

hjpotter92
440117

	Thank you all! Many great ideas. – user2223670 Apr 10 at 5:34
	Worked very well, thank you! – user2223670 Apr 10 at 5:51

Broken Heart ღ · Answer 2 · 2013-04-10 05:22:39Z

function fun(that){
       var anchor = $(that).find('a');
       sessionStorage.KenID = anchor.attr('id');
       changePage();

}

 $(document).on('click', '#List01 li', function ()
    {
        fun(this);
    });
    $(document).on('click', '#List02 li', function ()
    {
        fun(this);
    });
    $(document).on('click', '#List03 li', function ()
    {
        fun(this);
    });

Use this code to optimize.

c-smile · Answer 3 · 2013-04-10 05:23:36Z

One handler will do all this:

$(document).on('click', '[id^=List] li', function ()
    {
        var anchor = $(this).find('a');
        sessionStorage.KenID = anchor.attr('id');
        changePage();
    });

see: http://www.w3.org/TR/css3-selectors/#attribute-substrings

chandresh_cool · Answer 4 · 2013-04-10 05:26:25Z

I hope this will do

    $(document).ready(function(){

        $('li').click(function(){
        var id = $(this).attr('id');
        var anchor = $(this).find('a');
            sessionStorage.KenID = anchor.attr('id');
            changePage();
        });
    });

asked	4 months ago
viewed	44 times
active	4 months ago

How to optimize jQuery code

migrated from stackoverflow.com Apr 10 at 11:23

4 Answers

Your Answer

Community Bulletin

How to optimize jQuery code

migrated from stackoverflow.com Apr 10 at 11:23

4 Answers

Your Answer

Sign up or login

Post as a guest

Community Bulletin

Related