Question

我正在尝试使用下面的代码添加具有某些属性的动态div，但代码不起作用。

<div id="divsholder"></div>

var num = "4";
var container = $('<div />');
for(var i = 1; i <= num; i++) {
container.append('<div id="mystyle" class="pic'+i+'" />');
}
$('#divsholder').html(container);

有什么想法吗？

Answer 1

使用jQueries“APPEND”函数尝试这样的操作检查我的小提琴：http://jsfiddle.net/somdow/9A6DA/2/

通过这个例子，我做到了这样，当p标签达到4时，它就会提醒用户。您可以在第4次活动之后添加您想要的任何内容等。

的CSS：

#mainW{width:200px; background:#f00; text-align:center;}
.blu{ background-color:blue; }

HTML：

<div id="mainW">
    <a href="#"> content here,</a><br/>

</div>

这里是jsfiddle所需的代码。 JS / JQ

$('#mainW a').click(function(){

    $('#mainW').append( "<p>Test</p>" );

    if( $('p').length == 4 ){ alert("lopan")}
});

Answer 2

您的代码运作正常

<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
</head>
<body>
    <div id="divsholder"></div>
<script>
$(document).ready(function(){
    var num = "4";
    var container = $('<div />');
    for(var i = 1; i <= num; i++) {
        container.append('<div id="mystyle" class="pic'+i+'" />');
    }
    $('#divsholder').html(container);
});
</script>
</body>
</html>

代码结果

<div id="divsholder"><div><div id="mystyle" class="pic1"></div><div id="mystyle" class="pic2"></div><div id="mystyle" class="pic3"></div><div id="mystyle" class="pic4"></div></div></div>

ID元素可能是唯一且唯一的。如果您使用多个ID，请使用class =“class-name”

Answer 3

您的代码运行正常，但结尾的HTML结果如下：

 ---divsholder----------------------
 |                                 |
 |  -- a div with no name ------   |
 |  |                          |   |
 |  |  --divs from for loop--  |   |
 |  |  |                    |  |   |
 |  |  |                    |  |   |
 |  |  ----------------------  |   |
 |  |                          |   |
 |   ---------------------------   |
 |                                 |
 -----------------------------------

因此，问题可能是因为您将divs非故意地放入另一个div中。

我修改了您的代码，以便您可以在此处直观地看到问题

http://jsfiddle.net/xCr5C/

在另一个div中添加动态div

3 个答案: