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标签被附加到#calendar div中的所有ul。

现在，在没有重复的情况下将li附加到ul标签的正确方法是什么？感谢。

Answer 1

这是因为$("#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 2

尝试重写您的代码，如下所示，

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

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 5

每次运行$("#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 6

我认为你想动态创建5个ul并在其中7 li的

更新代码

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

错误就是在每次进入第二个循环（从第一个 ul 开始）时，它会向所有类项追加 li 以防止它与id（我离开了类名，假设处理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>");

        };
    };

jquery循环无法正常工作

7 个答案: