Question

我这里有一些基本代码。它只是为某个定义的位置创建一个div元素，而ID不是动态的。

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

    ++i;
}

问题在于动态ID。使用css，我不知道如何在该函数中定义CSS。对于此示例，我使用了文档中某处定义的内部CSS。有了这个位置，我想卡片必须是CSS绝对定位才能像我想的那样执行。

这是我写的这个简单代码的结果： http://dl.dropbox.com/u/2849320/achieved.png

这就是我想要实现的目标： http://dl.dropbox.com/u/2849320/want%20to%20achieve.jpg

我该怎么做？

Answer 1

我会这样做的。类是处理样式的更好方法。

http://jsfiddle.net/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;
}

Answer 2

如果我理解正确，请使用style属性，您不需要动态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 accomplish
        style: 'position:absolute;margin-left:' + i * 20 + 'px;z-index:' + i;
     }).appendTo('#igrac1');

     i++;
}

所以你可以选择它们：

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

以下是jsFiddle工作的示例，其中有一张糟糕的卡片图片。

Answer 3

如果您需要创建动态ID，您可以这样做（抱歉我无法访问您的图片，代理人阻止了我）：

             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++;
            }

如果您稍后需要访问这些元素，请使用attribute starts with selector

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

Answer 4

如果您想避免在字符串中编写所有css，可以在创建元素后链接属性和css。一个例子可能是：

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

jQuery使用动态ID创建DIV并定义CSS属性（定义该div的外观和位置）

4 个答案: