I have some basic code here. It just creates a div element to a certain defined position, and the ID is not dynamic.

var i=1;
while (i<=6)
{
    jQuery('<div/>', {
        id: 'karta_back'
        // I don't know how to insert CSS here
    }).appendTo('#igrac1');

    ++i;
}

The problem is with dynamic ids. With css, I don't know how to define the CSS inside that function. For this example, I used the internal CSS that is defined somewhere in the document. With the position, I suppose that cards need to be CSS absolute positioned to perform like i would like.

This is the result that I have with this simple code I wrote: .png

This is what i want to achieve: .jpg

How can I do this?

I have some basic code here. It just creates a div element to a certain defined position, and the ID is not dynamic.

var i=1;
while (i<=6)
{
    jQuery('<div/>', {
        id: 'karta_back'
        // I don't know how to insert CSS here
    }).appendTo('#igrac1');

    ++i;
}

The problem is with dynamic ids. With css, I don't know how to define the CSS inside that function. For this example, I used the internal CSS that is defined somewhere in the document. With the position, I suppose that cards need to be CSS absolute positioned to perform like i would like.

This is the result that I have with this simple code I wrote: http://dl.dropbox./u/2849320/achieved.png

This is what i want to achieve: http://dl.dropbox./u/2849320/want%20to%20achieve.jpg

How can I do this?

• javascript
• jquery
• css
• dom
• dynamic

• 1 Is your question regarding how to create dynamic IDs or how to set the CSS for each card? Should each card have it's own dynamically created CSS or will they all be the same? – arb Commented Dec 2, 2011 at 15:44
• i need dynamic ids i think @Nicola Peluchetti resolved that in his answer, but i need also a css with some same atributes, like background image that would be the same for all created objects, and possition that would be different for all created objects.. – Игор Commented Dec 2, 2011 at 15:50

4 Answers 4

I would do it something like this. Classes are a much better way of handling the styling.

http://jsfiddle/Ctsus/

var i = 1;
while (i <= 6) {
    var newId = 'karta_back' + i;
    $('<div/>', {
        id: newId,
        'class': 'card'
    }).appendTo('#igrac1');

    i++;
}

#igrac1 div.card { 
    float: left; 
    border: 1px solid black; 
    height: 150px; 
    width: 100px;
    background: lightblue;
    margin-left: -30px;
}

If I understand you correctly just, use the style attribute, you don't need a dynamic id:

var i = 1;
while (i <= 6) {
    jQuery('<div/>', {
        id: 'karta_back' + i, //this will add serial number to end of ID
        //this is a good starting point for what you're trying to acplish
        style: 'position:absolute;margin-left:' + i * 20 + 'px;z-index:' + i;
     }).appendTo('#igrac1');

     i++;
}

So you can select them like:

$('#karta_back1', '#karta_back2'); //selects first two

Here is a jsFiddle example of it working, with a crappy card image.

If you need to create dynamic id you could do (sorry i can't access your images, a proxy is blocking me):

             var i=1;
            while (i<=6)
            {    
                 var newId = 'karta_back'+i;
                jQuery('<div/>', {
                    id: newId 
                    //i don't know how to insert css here

                }).appendTo('#igrac1');

                i++;
            }

if you need to access later those elements use an attribute starts with selector

 $('div[id^=karta_back]')

If you'd like to avoid writing all your css in a string, you could chain attributes and css after the creation of the element. an example could be:

$('<div>')
  .attr({
    id: "myID"
  })
  .css({
    position: "absolute",
    background-color: "blue"
  });