複数のdivを動的に作成し、jQueryを使用してそれぞれ異なるCSSプロパティを割り当てます。

Question

ループを使用して異なるCSS属性を持つ複数のdivを作成できないという問題があります。誰かが私を導くなら、本当に役立つだろう。

コンテナ内に1つの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>