Selecting divs from jquery array values

Question

i have a easy problem, i need do a action .click() if is clicked on a div in my array...

if($('#container_1').click(function(){ 
    $('div#image').fadeOut('fast', function(){
        $('div#cat_1').css('background-color', '#F30');
        $('#new_frame').show('fast').load('history.html');
    });
}));

if($('#container_2').click(function(){ 
    $('div#image').fadeOut('fast', function(){
        $('div#cat_2').css('background-color', '#F30');
        $('#new_frame').show('fast').load('history.html');
    });
}));

if($('#container_3').click(function(){ 
    $('div#image').fadeOut('fast', function(){
        $('div#cat_3').css('background-color', '#F30');
        $('#new_frame').show('fast').load('history.html');
    });
}));

if($('#container_4').click(function(){ 
    $('div#image').fadeOut('fast', function(){
        $('div#cat_4').css('background-color', '#F30');
        $('#new_frame').show('fast').load('history.html');
    });
}));

if($('#container_5').click(function(){ 
    $('div#image').fadeOut('fast', function(){
        $('div#cat_5').css('background-color', '#F30');
        $('#new_frame').show('fast').load('history.html');
    });
}));

Okay that is my code what works...

But i think that i can to do so much shorter... with a code like this::

Contenedores = ['1', '2', '3', '4', '5'];

if($('#container_'+Contenedores).click(function(){ 
    $('div#image').fadeOut('fast', function(){
        $('div#cat_'+Contenedores).css('background-color', '#F30');
        $('#new_frame').show('fast').load('history.html');
    });
}));

But i don't know how do it right to work...

Thanks, and sorry my poor english.

If you add a class to those elements you wouldn't need to worry about setting up the check for each id. — scrappedcola
– scrappedcola, Commented Dec 17, 2012 at 19:56
Is there a reason you need the if parts or am I missing something? — Ian
– Ian, Commented Dec 17, 2012 at 19:57

adeneo · Accepted Answer · 2012-12-17 20:43:08Z

4

I'd just use the number in the ID of the clicked element to get the "cat" element. Why you would do the exact same thing and load the same content on every click is beyond me, but something like this :

$('[id^="container_"]').on('click', function(){ 
    var self=this;
    $('div#image').fadeOut('fast', function(){
        $('div#cat_'+self.id.replace('container_','')).css('background-color', '#F30');
        $('#new_frame').show('fast').load('history.html');
    });
});

edited Dec 17, 2012 at 20:43

answered Dec 17, 2012 at 19:54

adeneo

319k29 gold badges410 silver badges392 bronze badges

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

5 Comments

scrappedcola Over a year ago

you're missing a ")" after this.id

Hangover Over a year ago

Works, but not add the class to cat_(x) -> x = clicked container_(x)

Christophe Over a year ago

This option is heavier than just grabbing elements by id.

adeneo Over a year ago

Roland - Add what class exactly? @Christophe - If you think a simple string replace is heavier than looking up array values, you'll be disappointed.

Christophe Over a year ago

@adeneo I am talking about $('[id^="container_"]') which scans the whole document. See my answer for a faster alternative.

Ibu · Accepted Answer · 2012-12-17 19:56:32Z

2

There are many ways to perform this action, you can have the values comma seperated too:

$('#container_1,#container_2,#container_3,#container_4,...').click(function(){ ...

Or you can use a class name on these divs to make it much simpler:

$('.toclick').click(function(){

});

Using a class name would be my favorite.

PS: You don't need the if statement.

answered Dec 17, 2012 at 19:56

Ibu

44k14 gold badges82 silver badges109 bronze badges

Comments

Christophe · Accepted Answer · 2012-12-17 20:09:26Z

0

You just need to loop through your array:

var Contenedores = ['1', '2', '3', '4', '5'];

$.each(Contenedores,function(index,value){
$('#container_'+value).click(function(){ 
$('div#image').fadeOut('fast', function(){
    $('div#cat_'+value).css('background-color', '#F30');
    $('#new_frame').show('fast').load('history.html');
});
});
});

That said, there must be a better way - either classes or event delegation - but it's hard to tell without understanding your use case.

answered Dec 17, 2012 at 20:09

Christophe

28.3k29 gold badges104 silver badges145 bronze badges

4 Comments

Leigh Over a year ago

@Xenon - If you want to share your full working code, it is better to post it as a separate answer (rather than modifying this one). You can still accept Christophe's response as the answer. Just click the green check mark next to his answer.

Hangover Over a year ago

@Leigh I try to do a separated answer, but i cannot answer because i have less than 10 points of rep.

Christophe Over a year ago

@Xenon then maybe let me know as a comment what I am missing?

Leigh Over a year ago

@Xenon - Okay, must be a restriction on answering your own question :/ FWIW, you are almost there .. just 1 more point.

Collectives™ on Stack Overflow

Selecting divs from jquery array values

3 Answers 3

5 Comments

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related