Using JQuery to change css based on an array of attributes

Question

Here is an example of what I am trying to do, although originally I was attempting something more complicated I have tracked the problem to this bit of code. I am sure the problem relates to what is being passed to the array but all my attempts get the same result, four divs on top of each other in the corner.

--CSS--

div {
    position : absolute;
    border: 2px solid black;
}

--SCRIPT--

$(document).ready(function(){

var coordinates = [
"{'top' : '100px'}",
"{'top' : '200px'}",
"{'top' : '300px'}",
"{'top' : '400px'}"
]

var numberOfDivs = coordinates.length;

for (i=0; i<numberOfDivs; i++){
$('#parent').append('<div>'+i+'</div>').css(coordinates[i]);
}
}); 

--HTML--

<div id = "parent">
    parent
</div>

so what is the question?

Mayank K. Swami
– Mayank K. Swami

2012-09-23 10:54:27 +00:00
Commented Sep 23, 2012 at 10:54 — Mayank K. Swami
– Mayank K. Swami, Commented Sep 23, 2012 at 10:54

Martin Lögdberg · Accepted Answer · 2012-09-23 11:02:27Z

2

Abody97 as right about the problem with passing a string as parameter to css. You also have a problem with applying .css to the wrong element (beacuse of jQuery chaining: http://tobiasahlin.com/blog/quick-guide-chaining-in-jquery/). I guess you want the css to be applied to each appended child, right?

Here is a jsFiddle that does that: http://jsfiddle.net/U3ezb/

answered Sep 23, 2012 at 11:02

Martin Lögdberg

4214 silver badges4 bronze badges

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

Comments

Hank · Accepted Answer · 2012-09-23 11:01:12Z

1

Two problems;

1) you need to get rid of the quotations around each object in the coordinates array like this:

var coordinates = [
{'top' : '100px'},
{'top' : '200px'},
{'top' : '300px'},
{'top' : '400px'}
]

2) you need to then apply the css to the <div>, not to the #parent.

$("<div></div>").appendTo('#parent').css(coordinates[i]);

Here is a jsFiddle for you to show it working http://jsfiddle.net/BZpRG/

answered Sep 23, 2012 at 11:01

Hank

7316 silver badges10 bronze badges

Comments

Chris · Accepted Answer · 2012-09-23 11:12:58Z

1

Change your coordinates definition to this:

var coordinates = [
{'top' : '100px'},
{'top' : '200px'},
{'top' : '300px'},
{'top' : '400px'}
];

The key here is that you need to pass an object as a parameter to .css(), not a string.

Note: (thanks to @MartinLodgberg for pointing that out); another issue is that when you do:

$('#parent').append('<div>' + i + '</div>').css(coordinates[i]);

.css() is being called on $("#parent"). To apply it on the newly appended div, use something like this:

var div = $("<div>" + i + "</div>").css(coordinates[i]);
$("#parent").append(div);

edited Sep 23, 2012 at 11:12

answered Sep 23, 2012 at 10:55

Chris

27k6 gold badges61 silver badges72 bronze badges

1 Comment

Martin Welbourne Over a year ago

Thank you and to everyone else who replied. I understand now what I was doing wrong, I had already tried passing objects, it was the #parent issue that I hadn't realised.

Denzil Sequeira · Accepted Answer · 2012-09-23 11:03:39Z

0

can you try the following

$(document).ready(function(){

    var coordinates = ['100px',200px','300px','400px'];
    var numberOfDivs = coordinates.length;
        for (i=0; i<numberOfDivs; i++){

       $('#parent').append('<div>'+i+'</div>').css('top',cordinates[i]);

              }
     });

answered Sep 23, 2012 at 11:03

Denzil Sequeira

1293 silver badges7 bronze badges

Comments

ido bublil · Accepted Answer · 2012-09-23 11:08:11Z

0

You can't use the 'top' property with relative position You have 2 choices

var coordinates = [
        "top: 100px; position : absolute;",
        "top: 200px; position : absolute;",
        "top: 300px; position : absolute;",
        "top: 400px; position : absolute;"
        ]

Or

 var coordinates = [
         "margin-top: 100px;",
         "margin-top: 200px;",
         "margin-top: 300px;",
         "margin-top: 400px;"
         ]

answered Sep 23, 2012 at 11:08

ido bublil

731 silver badge3 bronze badges

1 Comment

Hank Over a year ago

He already has position : absolute; set... not relative at all

Collectives™ on Stack Overflow

Using JQuery to change css based on an array of attributes

5 Answers 5

Comments

Comments

1 Comment

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

1 Comment

Comments

1 Comment

Related