добавление динамических div внутри другого div

0

Я пытаюсь использовать приведенный ниже код, чтобы добавить динамические 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);

Есть идеи?

  • 1
    Вы уверены, что просто ничего не видите, потому что нет текстового содержимого?
  • 3
    Ваш код работает . Имейте в виду, что атрибут id должен быть уникальным для всех элементов DOM!
Показать ещё 4 комментария
Теги:

3 ответа

2
Лучший ответ

Попробуйте что-то подобное с помощью функции 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")}
});
Поделиться
  • 0
    Код OP уже использует .append() . Если вы имеете в виду, что она должна использовать .append() вместо .html() вы должны прояснить это, показав улучшенную версию своего кода, а не какой-то совершенно новый код.
  • 0
    Когда я увидел ОПС "есть идеи?" Я подумал, что это может быть короче, и написать это очень быстро. Но ты прав, лол
Показать ещё 4 комментария
1

Ваш код работает отлично

<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>

Идентификационный элемент может быть одним и уникальным. Если вы используете более одного идентификатора, используйте class= "class-name"

Поделиться
0

Ваш код работает отлично, но конечный HTML приводит к следующему:

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

Таким образом, проблема может возникнуть из-за того, что вы размещаете divs в другой div un-намеренно.

Я изменил ваш код, чтобы вы могли ясно видеть проблему визуально здесь

http://jsfiddle.net/xCr5C/

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню