jquery loop не работает должным образом

Question

это моя петля. Я хочу напечатать теги 7 li и теги 5 ul. Это мой код.

for (var i = 0; i <= 4 ; i++) { 
      $("#calendar").append("<ul></ul>"); 

     for (var j = 0; j <= 6; j++) { 

      $("#calendar ul").append("<li></li>").addClass("days"); 
      $("#calendar ul li").addClass("day"); 

      count = count + 1; 
     }; 
    }; 

но результат сильно отличается от ожидания. В каждом последовательном цикле есть метки 35, 28, 21, 14 и 7 li. Я понимаю, почему это так. Теги li добавляются ко всем ul в div #calendar.

Теперь, каков правильный способ добавления li в теги ul без повторения? Благодарю.

Answer 1

Попытка переписать ваш код, как показано ниже,

for(var i = 0; i <= 4 ; i++) { 
    var ul = $("<ul>").appendTo("#calendar").addClass("days"); 
    for(var j = 0; j <= 6; j++) { 
     $("<li>").appendTo(ul).addClass("day"); 
     count = count + 1; 
    }; 
}; 

Вы используете общий селектор $("#something ul"), который будет выбирать все UL элементы внутри этого div. Поэтому вам нужно собрать вновь созданный ul в переменной и использовать его для дальнейших манипуляций.

Недавнее редактирование: вдохновлено кодом APJhony.

Answer 2

Это потому, что $("#calendar ul") выберет все элементы ul в calendar, включая ранее добавленные.

for (var i = 0; i <= 4; i++) { 
 
    var $ul = $("<ul></ul>").appendTo('#calendar').addClass('days'); 
 
    for (var j = 0; j <= 6; j++) { 
 
    $("<li></li>", { 
 
     'class': 'day' 
 
    }).appendTo($ul); 
 
    }; 
 
};

.days { 
 
    border: 1px solid grey; 
 
    margin-bottom: 2px; 
 
} 
 
.day { 
 
    border: 1px solid blue; 
 
    margin-bottom: 2px; 
 
}

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

---

Вы также можете попробовать

var $ul = $(new Array(6).join('<ul class="days"></ul>')).appendTo('#calendar'); 
 
$ul.append(new Array(8).join('<li class="day"></li>'));

.days { 
 
    border: 1px solid grey; 
 
    margin-bottom: 2px; 
 
} 
 
.day { 
 
    border: 1px solid blue; 
 
    margin-bottom: 2px; 
 
}

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

Answer 3

Часть $("#calendar ul").append("<li></li>").addClass("days"); добавит li ко всем существующим ul в элементе календаря.

Лучше всего сделать, чтобы сохранить ссылку на ul, которую вы хотите добавить в li, и сделать это в первом цикле. Затем во втором цикле добавьте li.

for (var i = 0; i <= 4 ; i++) { 
    var $ul = $('<ul/>', { class: 'days'}); 

    for (var j = 0; j <= 6; j++) { 
    var $li = $('<li/>', { class: 'day', text: 'li test' }); 

    $ul.append($li); 
    }; 

    $('#calendar').append($ul); 
}; 

https://jsfiddle.net/s7fkw641/

Answer 4

Каждый раз, когда вы запускаете $("#calendar ul").append(...), вы добавляете данные к каждому элементу в DOM, который соответствует #calendar ul. Я рекомендую создавать свои элементы один за другим, присваивая переменные переменные $(some_html_string). Таким образом, ul будет означать только один элемент <ul> за раз.Например:

var calendar = $("#calendar"); 

for (var i = 0; i <= 4; i++) { 
    var ul = $("<ul></ul>"); 
    ul.addClass("days"); 

    for (var j = 0; j <= 6; j++) { 
     var li = $("<li></li>"); 
     li.addClass("day"); 
     ul.append(li); 
     count = count + 1; 
    } 

    calendar.append(ul); 
} 

Answer 5

for (var i = 0; i <= 4 ; i++) { 
     $("#calendar").append("<ul></ul>"); 
    for (var j = 0; j <= 6; j++) { 
     $("#calendar ul:last-child").append("<li></li>").addClass("days"); 
     $("#calendar ul:last-child li").addClass("day"); 
    }; 
}; 

Вы можете только добавить ul:last-child

Answer 6

Я думаю, что вы хотите создать динамически 5 уль-х, так и внутри которой

обновленный код 7 Ли

jQuery(document).ready(function($){ 
    for (var i = 0; i <= 4 ; i++) { 
     $("#calendar").append("<ul></ul>"); 
    } 
    for (var j = 0; j <= 6; j++) { 
     $("#calendar ul").append("<li></li>").addClass("days"); 
     $("#calendar ul li").addClass("day"); 
    } 
}); 

Надеюсь, это поможет!

Answer 7

Ошибки здесь его добавление Ли ко всем элементам класса каждый и каждый раз, когда он идет на втором цикле (начиная с первого ул), чтобы предотвратить этот блок его с идентификатором (я оставил имя класса, предполагая его важно обрабатывать css или что-то еще).

здесь простое решение

for (var i = 1; i <= 5 ; i++) { 
      $("#calendar").append("<ul class='days' id='"+i+"'></ul>") 

     for (var j = 1; j <= 7; j++) { 

      $("#calendar #"+i+".days ").append("<li class='day'></li>"); 

     }; 
    };