jquery/javascript how to use $.each on a collection

Question

I need some help with this jQuery code. The code below works fine but i tried to use $.each instead and its not working.

$(document).ready( function(){

    $('#pull').click( function(event){
        event.stopPropagation();
        $('#pf').slideToggle();
    });
     $('#pullo').click( function(event){
        event.stopPropagation();
        $('#pt').slideToggle();
    });
      $('#pullc').click( function(event){
        event.stopPropagation();
        $('#pc').slideToggle();
    });

    $(document).click( function(){
        $('#pt').hide();
        $('#pf').hide();
        $('#pc').hide();
    });
});

The code below is not working for me, please help

var pul = ["#pull":"#pt","#pullo":"#pf", "#pullc":"#pc"];

$(document).ready( function(){

  $.each(pul, function(i, v){
    $(i).click( function(event){
        event.stopPropagation();
        $(v).slideToggle();
    });
    $(document).click(function(){
        $(v).hide();

    });
  });  


});

Looks like your array syntax is invalid. You should curly braces for objects ("associative" arrays). — Fabrício Matté
– Fabrício Matté, Commented Jan 16, 2014 at 19:42
Your pul array should be an object, that's invalid JavaScript. It seems you want to refactor the script. Can you post the HTML? — Ram
– Ram, Commented Jan 16, 2014 at 19:42
Just a note, when you click on the document all of your elements will .hide(). — gen_Eric
– gen_Eric, Commented Jan 16, 2014 at 19:51
Thank you , it's working now. Syntax error should have used {} instead of [] :) — smith09
– smith09, Commented Jan 16, 2014 at 20:02

Zaheer Ahmed · Accepted Answer · 2014-01-16 19:44:34Z

1

Make your collection object instead of array:

Here is Demo

var pul = {"#pull":"#pt","#pullo":"#pf", "#pullc":"#pc"};

$(document).ready( function(){

  $.each(pul, function(i, v){
    $(i).click( function(event){
        event.stopPropagation();
        $(v).slideToggle();
    });
    $(document).click(function(){
        $(v).hide();    
    });
  });

answered Jan 16, 2014 at 19:44

Zaheer Ahmed

28.7k12 gold badges77 silver badges113 bronze badges

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

1 Comment

gen_Eric Over a year ago

$(''+i) can just be $(i). No need to "convert" it to a string.

gen_Eric · Accepted Answer · 2014-01-16 19:45:51Z

0

Try this,

var pul = {"#pull":"#pt","#pullo":"#pf", "#pullc":"#pc"};

$(document).ready( function(){

  $.each(pul, function(i, v){
    $(i).click( function(event){
        event.stopPropagation();
        $(v).slideToggle();
    });
    $(document).click(function(){
        $(v).hide();

    });
  }); 
});

edited Jan 16, 2014 at 19:45

gen_Eric

228k42 gold badges304 silver badges343 bronze badges

answered Jan 16, 2014 at 19:44

Subash Selvaraj

3,3871 gold badge16 silver badges17 bronze badges

1 Comment

smith09 Over a year ago

Thank you , it's working now. Syntax error should have used {} instead of [] :)

EmptyArsenal · Accepted Answer · 2014-01-16 19:56:06Z

0

You have two ways you can solve this. Either make your array as 2D array:

var pul = [
    ["#pull", "#pt"],
    ["#pullo", "#pf"], 
    ["#pullc", "#pc"]];

And you can do $(v[0]).click(... instead of $(i).click(.... And $(v[1]).hide(); instead of $(v).hide();.

Or, you can convert it to an object like others have suggested:

var pul = {"#pull":"#pt","#pullo":"#pf", "#pullc":"#pc"};

Right now, you have an invalid object and an invalid array.

answered Jan 16, 2014 at 19:56

EmptyArsenal

7,4964 gold badges40 silver badges66 bronze badges

1 Comment

smith09 Over a year ago

I converted it to a valid object and its working now. Thank you

Collectives™ on Stack Overflow

jquery/javascript how to use $.each on a collection

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related