jquery css using arrays as values

Question

I am creating a function that I need to pass in values from an array, one of the values I need to add in is a series of values for the jquery css array

essentially I need to do the following

myArray = new Array();
myArray[0] = ""{'float':'left','-webkit-border-top-left-radius':'20px','-webkit-border-bottom-left-radius':'20px','-webkit-border-top-right-radius':'0px','-webkit-border-bottom-right-radius':'20px'}";"
function(){
$("#myDiv").click(function(){
$(this).css(myArray[0]):
});
}

That's not the exact code as its part of a way bigger function, however the aspect I am falling down on is passing the string in the array to the .css array, I can do this if I were to only include the value in the array, however this means I need to add additional items to my array which I don't want to do

Any help - pointers would be appreciated

Many thanks!

So for context

okay so my array is var card2Pos = new Array(); card2Pos[0]="475px"; card2Pos[1]="80px"; card2Pos[2]="1"; card2Pos[3]="500px"; card2Pos[4]="70px"; card2Pos[5]="90px"; card2Pos[6]="510px"; card2Pos[7]="9"; card2Pos[8]="{'float':'left','-webkit-border-top-left-radius':'20px','-webkit-border-bottom-left-radius':'20px','-webkit-border-top-right-radius':'0px','-webkit-border-bottom-right-radius':'20px'}"; card2Pos[9]="475px"; card2Pos[10]="80px"; card2Pos[11]="580px"; card2Pos[12]="60px"; card2Pos[13]="8"; card2Pos[14]="right"; card2Pos[15]="450px"; card2Pos[16]="90px"; card2Pos[17]="625px"; card2Pos[18]="60px"; card2Pos[19]="7"; card2Pos[20]="right"; card2Pos[21]="425px"; card2Pos[22]="100px"; card2Pos[23]="670px"; card2Pos[24]="60px"; card2Pos[25]="6"; card2Pos[26]="right"; card2Pos[27]="400px"; card2Pos[28]="110px"; card2Pos[29]="715px"; card2Pos[30]="60px"; card2Pos[31]="5"; card2Pos[32]="right"; card2Pos[33]="375px"; card2Pos[34]="120px"; card2Pos[35]="760px"; card2Pos[36]="60px"; card2Pos[37]="4"; card2Pos[38]="right"; card2Pos[39]="350px"; card2Pos[40]="130px"; card2Pos[41]="805px"; card2Pos[42]="60px"; card2Pos[43]="3"; card2Pos[44]="right"; card2Pos[45]="325px"; card2Pos[46]="140px"; card2Pos[47]="850px"; card2Pos[48]="60px"; card2Pos[49]="2"; card2Pos[50]="right"; being passed into the following function ` function uber(arg) { $card1.animate({ height:arg[0], top:arg[1] },500).css({'z-index':card2Pos[2]});

    $card2.animate({
                    height:arg[3],
                    top:arg[4],
                    left:arg[5],
                    width:arg[6]
                    },500).css({'z-index':arg[7]});
    $card2Nav.css(arg[8]);
    $card3.animate({
                    height:arg[9],
                    top:arg[10],
                    left:arg[11],
                    width:arg[12]
                    },500).css({'z-index':arg[13]});
    $card3Nav.css({'float':arg[14]});
    $card4.animate({
                    height:arg[15],
                    top:arg[16],
                    left:arg[17],
                    width:arg[18]                       
                    },500).css({'z-index':arg[19]});
    $card4Nav.css({'float':arg[20]});
    $card5.animate({
                    height:arg[21],
                    top:arg[22],
                    left:arg[23],
                    width:arg[24]
                    },500).css({'z-index':arg[25]});
    $card5Nav.css({'float':arg[26]});
    $card6.animate({
                    height:arg[27],
                    top:arg[28],
                    left:arg[29],
                    width:arg[30]
                    },500).css({'z-index':arg[31]});
    $card6Nav.css({'float':arg[32]});
    $card7.animate({
                    height:arg[33],
                    top:arg[34],
                    left:arg[35],
                    width:arg[36]
                    },500).css({'z-index':arg[37]});
    $card7Nav.css({'float':arg[38]});
    $card8.animate({
                    height:arg[39],
                    top:arg[40],
                    left:arg[41],
                    width:arg[42]
                    },500).css({'z-index':arg[43]});
    $card8Nav.css({'float':arg[44]});
    $card9.animate({
                    height:arg[45],
                    top:arg[46],
                    left:arg[47],
                    width:arg[48]
                    },500).css({'z-index':arg[49]});
    $card9Nav.css({'float':arg[50]});
}
`

Nick Craver · Accepted Answer · 2010-11-10 10:51:29Z

4

You can do this, but don't store it as a string - rather directly as an object, like this:

var myArray = [
  {'float':'left','-webkit-border-top-left-radius':'20px','-webkit-border-bottom-left-radius':'20px','-webkit-border-top-right-radius':'0px','-webkit-border-bottom-right-radius':'20px'}
  //more objects...
];
$(function(){
  $("#myDiv").click(function(){
    $(this).css(myArray[0]);
  });
});

You can try it out here.

answered Nov 10, 2010 at 10:51

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

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

3 Comments

user499846 Over a year ago

Ah thanks, but thats not going to serve the purpose unfortunately, the aim is to have 1 function that takes the array name as its argument, this has lots of other properties inside it so I ideally need it to be all in one array :(

Nick Craver Over a year ago

@user499846 - this uses a single array...I'm not following, can you clarify? It sounds like you want an object rather than an array if you want named access.

user499846 Over a year ago

Sure, sorry that was probably not the best description! :)

George Cummins · Accepted Answer · 2013-06-21 20:25:24Z

1

I suggest you to take a look at this first: jQuery Array tutorial

Than I think that it can work perfectly, just passing the code in a more clear way:

var myArray = new Array(1);
myArray[0] = "{ float:'left', -webkit-border-top-left-radius:'20px', etc...}";

$("#myDiv").click(function(){
$(this).css(myArray[0]): //this put the css on #myDiv
});

edited Jun 21, 2013 at 20:25

George Cummins

29k8 gold badges74 silver badges91 bronze badges

answered Nov 10, 2010 at 11:41

Andrea Turri

6,5207 gold badges41 silver badges64 bronze badges

4 Comments

user499846 Over a year ago

@Torro Thanks for the link and the code, however the code doesn't work :/ even after the replacing the ':' with a ';' on the end of your second from last line I added the following code as a test and it failed with no errors

user499846 Over a year ago

<script src="script/jquery-1.4.2.min.js" type="text/javascript"></script>  <style> div { border: solid 1px #ddd; width:800px;height:800px;background:red; } </style> <div id="myDiv">Click me!</div>  <script> var myArray = new Array(1); myArray[0] = "{ float:'left', -webkit-border-top-left-radius:'20px', height:'10px'}";    $("#myDiv").click(function(){ 	alert('clicked') 	$(this).css(myArray[0]); //this put the css on #myDiv }); </script>

Andrea Turri Over a year ago

is strange, I tryed right now and it works.. (safari, ff and ie8).

Andrea Turri Over a year ago

Now I see if there is some improvement to do

user3254411 · Accepted Answer · 2014-07-02 06:00:40Z

0

you can use like this

$(this).css({ width: '100%', height: '600px' });

answered Jul 2, 2014 at 6:00

user3254411

6071 gold badge7 silver badges8 bronze badges

1 Comment

Oleg Estekhin Over a year ago

In what way it is different from @Nick-Craver answer?

Aneal · Accepted Answer · 2016-01-20 05:39:35Z

0

hi the discussion is really help full for me for the same case. The following may be the solution you are looking for.

var myArray ={'float':'right','font-size':'24px','-webkit-border-top-left-radius':'20px','-webkit-border-bottom-left-radius':'20px','-webkit-border-top-right-radius':'0px','-webkit-border-bottom-right-radius':'20px'};
$(function(){
$("#myDiv").click(function(){
$(this).css(myArray);
});
});

edited Jan 20, 2016 at 5:39

answered Jan 20, 2016 at 5:30

Aneal

11 bronze badge

Collectives™ on Stack Overflow

jquery css using arrays as values

Many thanks!

4 Answers 4

3 Comments

4 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Many thanks!

4 Answers 4

3 Comments

4 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related