CODEWITHSUNDEEP
jquerycss
Martin Welbourne
Martin Welbourne

Reputation: 3

Using JQuery to change css based on an array of attributes

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>

Upvotes: 0

Views: 2029

Answers (5)

Chris
Chris

Reputation: 26878

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);

Upvotes: 1

ido bublil
ido bublil

Reputation: 73

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;"
         ]

Upvotes: 0

Denzil Sequeira
Denzil Sequeira

Reputation: 129

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]);

              }
     });

Upvotes: 0

Martin L&#246;gdberg
Martin L&#246;gdberg

Reputation: 421

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/

Upvotes: 2

Hank
Hank

Reputation: 731

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/

Upvotes: 1

Related Questions