javascript - jquery $.each 没有给出表中的所有信息

Question

Fiddle

我想将数组中所有记录的名称放入表中，我的数组索引不正确，因此我使用 $.each 而不是使用 for 循环进行迭代。我的问题是我只能显示最后一个元素，但如果我尝试显示两个数组都存在的值，它就会正确显示。 我在这段代码中缺少什么。 任何想法表示赞赏

这是我的 JavaScript

for (var i = 0; i < name.length; i++) {
    var names = name[i].Names;
    $.each(names, function (item, names) {
        tr = $('<tr class=""/>');
        //console.log(complainant[obj]);
        //var names = complainant[obj];
        //if(names.hasOwnProperty('fname')){
        console.log(names.suffix);
        var acronymc;
        var upper = names.mname.toUpperCase();
        if (upper) {
            var matches = upper.match(/\b(\w)/g);
            //var matches = upper.replace(/^(\S+)\s+(\S).*/, '$1 $2.');
            //acronym = upper.slice(0,1);
            var acronym1 = matches.join('');
            acronymc = acronym1.slice(-1);
        } else {
            acronymc = '';
        }
        tr.append("<td id=''>" + "<span id='fname'>" + names.fname + "</span>" + " " + "<span id='mname'>" + acronymc + "</span>" + " " + "<span id='lname'>" + names.lname + "</span>" + " " + "<span id='suffix'>" + names.suffix + "</span>" + "</td>");
        tr.append("<td id=''>" + '<span id="street">' + names.street + '</span>' + " " + '<span id="brgy">' + names.brgy + '</span>' + " " + '<span id="town">' + names.town + '</span>' + " " + '<span id="city">' + names.city + '</span>' + "</td>");
        tr.append("<td id=''>" + names.contactnum + "</td>");
        tr.append("<td id=''>" + "<a href='#' class='editcomplainant'>Edit</a>" + "/" + "<a href='#' class='delete'>Delete</a>" + "</td>");

        //}

    });
    $("#nameslist").append(tr);

}

Answer 1

输入 $('#nameslist').append(tr);调用$.each内 block 。

以下是改进 tds 创建的方法:

var html =
   "<td>" +
     "<span id='fname'/> " +
     "<span id='mname'/> " +
     "<span id='lname'/> " +
     "<span id='suffix'/>" +
   "</td>";

var td = $(html);

td.find('#fname').text(names.fname);
td.find('#mname').text(acronymc);
td.find('#lname').text(names.lname);
td.find('#suffix').text(names.suffix);

tr.apppend(td);

为什么这样更好(恕我直言)？

• 您不会通过 < 创建无意的 html 标签。和>在变量内。

• 将自动生成适当的转义(auml代码)

• 更容易阅读