Пока цикл и JQuery append Не работает

Первый вопрос здесь! Надеюсь, ты поможешь мне. Я пытаюсь сделать 16 квадратов бок о бок, используя цикл Javascript while, но я не понимаю, почему это не работает. Я новичок в Javascript и jQuery, поэтому, пожалуйста, извините меня, если ответ слишком прост. Заранее спасибо.Пока цикл и JQuery append Не работает

$(document).ready(function() { 
 
    var divs = $("<div class='square'></div>"); 
 
    var i = 0; 
 
    while (i < 17) { 
 
    $("#wrapper").append(divs); 
 
    i++; 
 
    } 
 

 
});

#wrapper { 
 
    width: 600px; 
 
    margin: 70px auto; 
 
} 
 
.square { 
 
    width: 40px; 
 
    height: 40px; 
 
    display: inline-block; 
 
    border: 1px solid black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<body> 
 
    <div id="wrapper"> 
 

 
    <div class="square"></div> 
 

 
    </div> 
 
</body>

сильный текст

источник

2016-02-27 Omar

Существует нет для цикла мы можем видеть. Вы имели в виду во время цикла? –

Где находится цикл 'for', упомянутый в названии? –

В цикле, в каждой итерации необходимо создать новый объект, иначе это будет так же, как замена и тот же элемент столько раз

Таким образом, вы можете просто clone() Элемент в петле

$(document).ready(function() { 
 
    var divs = $("<div class='square'></div>"); 
 
    var i = 0; 
 
    while (i < 17) { 
 
    $("#wrapper").append(divs.clone()); 
 
    i++; 
 
    } 
 

 
});

#wrapper { 
 
    width: 600px; 
 
    margin: 70px auto; 
 
} 
 
.square { 
 
    width: 40px; 
 
    height: 40px; 
 
    display: inline-block; 
 
    border: 1px solid black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="wrapper"> 
 

 
    <div class="square"></div> 
 

 
</div>

источник

2016-02-27 05:04:18

обновляя эту часть кода:

var divs = "<div class='square'></div>";

так что ваш код будет:

$(document).ready(function() { 
 
    var divs = "<div class='square'></div>"; 
 
    var i = 0; 
 
    while (i < 17) { 
 
    $("#wrapper").append(divs); 
 
    i++; 
 
    } 
 

 
});

#wrapper { 
 
    width: 600px; 
 
    margin: 70px auto; 
 
} 
 
.square { 
 
    width: 40px; 
 
    height: 40px; 
 
    display: inline-block; 
 
    border: 1px solid black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<body> 
 
    <div id="wrapper"> 
 

 
    <div class="square"></div> 
 

 
    </div> 
 
</body>

источник

2016-02-27 05:04:19

Yo и хотите добавить DIV так просто написать HTML-код в DIVS вар

изменить свой код

var divs = "<div class='square'></div>"

Вместо

var divs = $("<div class='square'></div>");

источник

2016-02-27 05:08:33

Пока цикл и JQuery append Не работает

ответ

Смежные вопросы