動態創建多個div併爲每個使用jQuery

Question

我堅持在那裏我不能夠創建具有不同的CSS多個div使用循環屬性的問題，分配不同的CSS屬性。如果有人指導我，這將會非常有幫助。

我只在我的容器內創建一個div。我認爲問題在於我追加我的子div的方式。

預先感謝您。

Answer 1

$(".container").append('<div class="event" ><a>Sample text</a></div>'); 
$(".event").css("top",start+"px"); 
$(".event").css("width","94%"); 
$(".event").css("height",heightVal+"px"); 

您需要上下文化您的查找。你正在容器中創建一個事件，但是你選擇每個事件來改變它的CSS。邏輯更改爲可能...

var $event = $('<div class="event" ><a>Sample text</a></div>'); 
$(".container").append($event); 
$event.css("top",start+"px"); 
$event.css("width","94%"); 
$event.css("height",heightVal+"px"); 

Answer 2

我覺得你的問題就來了，因爲你動態創建的元素，它們試圖通過類選擇應用一些樣式，這是行不通的。

我想這樣做：

var new_element = $('<div class="event" ><a>Sample text</a></div>'); 
$(".container").append(new_element); 
$(new_element).css('color', 'red'); 

Answer 3

您可以創建一個容器和追加你的div在那裏。另外，最好將一個對象用於多種樣式（CSS）。看看我的解決方案。希望能幫助到你 ：）。

$(document).ready(function() { 
 

 
for (var i = 1; i <= 5; i++) { 
 
    $('#container').append('<div class="event" ><a>Sample text</a></div>').css({ 
 
    "width":"94%", 
 
    "color":"blue" 
 
    }); 
 
    } 
 

 
    $(".event:eq(2)").css({ 
 
    "background": "red" , 
 
    "color":"green", 
 
    "width":"300px" 
 
    }); 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<div id="container"></div>