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? — Charlie, Apr 10 '13 at 5:21
Ask at code-review, this is off-topic here. when you do it, delete this post. — gdoron, Apr 10 '13 at 5:22
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), — Meghraj Choudhary, Apr 10 '13 at 5:23

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

up vote 1 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 '13 at 5:22

hjpotter92
1,062423

Thank you all! Many great ideas. – user2223670 Apr 10 '13 at 5:34

Worked very well, thank you! – user2223670 Apr 10 '13 at 5:51

add a comment |

Code Lღver · 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	2 years ago
viewed	121 times
active	2 years ago

current community

your communities

more stack exchange communities

How to optimize jQuery code

migrated from stackoverflow.com Apr 10 '13 at 11:23

4 Answers 4

Your Answer

Hot Network Questions

current community

your communities

more stack exchange communities

How to optimize jQuery code

migrated from stackoverflow.com Apr 10 '13 at 11:23

4 Answers 4

Your Answer

Sign up or log in

Post as a guest

Related

Hot Network Questions