Javascript/JQuery 动态 UL 问题

Question

我一直在研究通过 javascript 和 jQuery 向网页添加动态 UL 和 LI 的问题，但我很困惑。

我几乎有了一个解决方案，但它没有添加样式，也没有将每个 UL 放在单独的行上。我感觉我正在创建的标签没有关闭，但我不确定。

我的最终目标是将每个 JSON 行作为一个单独的 UL 并在单独的行上显示，名字 + 姓氏 + 电话号码作为每个 UL 的列表项并像表格一样显示(不使用表格).除了通过 Javascript 动态添加的内容外，没有内联样式和 HTML 标记。

我得到了以下代码作为起点，但我的解决方案肯定有点偏离轨道。我已经搜索了几个小时，到目前为止，您可以在下面的 jsfiddle 链接中看到我的最佳尝试。非常感谢任何帮助。

function showContacts(data){
    var markup = "";
    $("body").html(markup);
};

$(document).ready(function myFunction() {
    var jsonText = '[ {"firstname":"Bill","lastname":"Gates","phone":"123-456-7891"}, {"firstname":"Steve","lastname":"Jobs","phone":"198-765-4321"}, {"firstname":"Kevin","lastname":"Spencer","phone":"007-008-0099"}, {"firstname":"David","lastname":"Zimmerman","phone":"800-256-6321"}, {"firstname":"Bert","lastname":"Ernie","phone":"127-624-1138"}, {"firstname":"Guy","lastname":"Lafleur","phone":"806-797-4213"} ]';
    showContacts(jsonText);
});

https://jsfiddle.net/bkweLctq/embedded/result/

Answer 1

您刚刚错过了 element 创建。 您的 odd 和 even 类样式也需要更改。

更新的 js

function showContacts(data) {
    var markup = "";
    var jo = $.parseJSON(data);
    console.log(jo);

var $body = $('body');

var _html = '';

    for(var i = 0; i<jo.length; i++){
        if((i+1)%2 == 0 ){
            _html += '<ul class="even">';
        }else {
            _html += '<ul class="odd">';
        }

        var _index = 0;
        $.each(jo[i], function(k,n) {
            if((_index+1)%2 == 0 ){
                _html += '<li class="even"> '+ n +' </li>'
            }else {
                _html += '<li class="odd"> '+ n +' </li>'
            }
            _index++;
        });
        _html += '</ul>';
    }

    $body.html(_html);
};

$(document).ready(function myFunction() {
    var jsonText = '[ {"firstname":"Bill","lastname":"Gates","phone":"123-456-7891"}, {"firstname":"Steve","lastname":"Jobs","phone":"198-765-4321"}, {"firstname":"Kevin","lastname":"Spencer","phone":"007-008-0099"}, {"firstname":"David","lastname":"Zimmerman","phone":"800-256-6321"}, {"firstname":"Bert","lastname":"Ernie","phone":"127-624-1138"}, {"firstname":"Guy","lastname":"Lafleur","phone":"806-797-4213"} ]';
    showContacts(jsonText);
});

I have also updated your fiddlejs link