jquery combine similar code

Question

I have many jquery click function, they are very similar, how to combine them for shorter code. (use regex or use array foreach?)

$(".menu").live('click', function() {
    var value = $(this).html();
    $('#menu').html(value);
});

$(".nav").live('click', function() {
    var value = $(this).html();
    $('#nav').html(value);
});

$(".list").live('click', function() {
    var value = $(this).html();
    $('#list').html(value);
});

Question! Are .menu, .nav, and .list all children of some node in your tree besides document? — Levi Morrison
– Levi Morrison, Commented Oct 10, 2011 at 20:44

Rob W · Accepted Answer · 2011-10-10 20:42:54Z

2

This should do:

var elems = ["menu", "nav", "list"];
$.each(elems, function(i, elem){
    $("."+elem).live('click',function(){
        var value = $(this).html();
        $('#'+elem).html(value);
    });
});

Create a list of elements.
Loop through it using $.each
The second argument of the function equals the element in the list (menu, nav, ..)

answered Oct 10, 2011 at 20:42

Rob W

350k87 gold badges811 silver badges683 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

fish man Over a year ago

Thanks, that is easier than I image.

Adam Terlson · Accepted Answer · 2011-10-10 21:01:41Z

2

Rob's answer is definitely vote-up-worthy, but I just wanted to say that sometimes you want to limit the arbitrary connections between two elements. Why should element X have a class that MUST be the same name as element Y's ID? It's pretty arbitrary and can be a hassle for people to later figure out.

You can instead approach it like this to make it more robust:

<a href="#" class="foo" data-your-data-attr="alice">alice</a>
<a href="#" class="foo" data-your-data-attr="bob">bob</a>
<a href="#" class="foo" data-your-data-attr="sue">sue</a>

Now your JS becomes super straight-forward and easy:

$(".foo").live('click',function(){
    var value = $(this).html();
    var yourDataAttr= $(this).data('yourDataAttr');
    $('#' + yourDataAttr).html(value);
});

edited Oct 10, 2011 at 21:01

answered Oct 10, 2011 at 20:46

Adam Terlson

12.7k4 gold badges46 silver badges63 bronze badges

2 Comments

Eric Over a year ago

Note that data attributes should be hyphen-separated, not camelCase. jQuery handles the transition for you - .data('yourDataAttr') will refer to data-your-data-attr.

Adam Terlson Over a year ago

@Eric Most accurate, my mistake on that one.

Collectives™ on Stack Overflow

jquery combine similar code

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related