javascript - 如何将字符串列表附加到div？

Question

我有这个 div:

<div id="cmplList" data-date="09/2017"></div>

这个方法:

function test(data) {       

            jQuery.each(data, function(index, value){
              $('#cmplList').append($("ul").append($("<li>").text()));
        });
}

data 变量是字符串数组。

我尝试创建 ul li 元素并将其附加到 div。但是，我似乎做错了，知道我在上面的代码中做错了什么吗？

Answer 1

您应该将 ul DOM 元素附加到 each 函数之外的 div。

另一方面，您必须先创建 ul，然后将其append 到您的 div。

<div id="cmplList" data-date="09/2017"></div>
function test(data) {
    var ul=$("<ul>");
    $.each(data, function(index, value){
          ul.append($("<li>").text(value));
    });
    $('#cmplList').append(ul);
}

简短示例:

var data = ['1','2'];
function test(data) {
        var ul=$("<ul>");
        $.each(data, function(index, value){
              ul.append($("<li>").text(value));
        });
        $('#cmplList').append(ul);
}
test(data);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cmplList" data-date="09/2017"></div>