Question

我遇到了一个问题，我无法使用循环创建具有不同css属性的多个div。如果有人指导我，那将非常有帮助。

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

    }

我只在容器内创建了一个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>

动态创建多个div并使用jQuery为每个div分配不同的css属性

3 个答案: