jQuery создает DIV с динамическим идентификатором и определенными атрибутами CSS (которые определяют внешний вид и положение этого элемента) - PullRequest
Новая
       4

jQuery создает DIV с динамическим идентификатором и определенными атрибутами CSS (которые определяют внешний вид и положение этого элемента)

1 голос
/ 02 декабря 2011

У меня есть базовый код здесь. Он просто создает элемент div в определенной определенной позиции, а идентификатор не является динамическим. 

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

    ++i;
}

Проблема с динамическими идентификаторами. С css я не знаю, как определить CSS внутри этой функции. Для этого примера я использовал внутренний CSS, который определен где-то в документе. Что касается позиции, я предполагаю, что карты должны иметь абсолютное позиционирование CSS, чтобы работать так, как я хотел бы.

Это результат, который я получил с этим простым кодом, который я написал: http://dl.dropbox.com/u/2849320/achieved.png

Вот чего я хочу достичь: http://dl.dropbox.com/u/2849320/want%20to%20achieve.jpg

Как я могу это сделать?

Ответы [ 4 ]

2 голосов
/ 02 декабря 2011

Я бы сделал это примерно так.Классы - намного лучший способ справиться со стилем.

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;
}
1 голос
/ 02 декабря 2011

Если я правильно вас понимаю, используйте атрибут style, вам не нужен динамический идентификатор: 

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 пример его работы с дерьмовым изображением карты.

0 голосов
/ 12 апреля 2018

Если вы хотите избежать записи всех ваших css в строку, вы можете связать атрибуты и css после создания элемента.Примером может быть: 

$('<div>')
  .attr({
    id: "myID"
  })
  .css({
    position: "absolute",
    background-color: "blue"
  });
0 голосов
/ 02 декабря 2011

Если вам нужно создать динамический идентификатор, который вы можете сделать (извините, я не могу получить доступ к вашим изображениям, прокси блокирует меня): 

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

если вам нужно получить доступ позже, эти элементы используют атрибут , начинающийся с селектора 

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