Jquery .append 重写答案

【问题标题】：Jquery .append over writingJquery .append 重写
【发布时间】：2013-03-06 05:39:42
【问题描述】：

我有以下 jQuery 代码（x 为 3，i 为 1，storeid 为 4）：

function addNewTableRow(x,i,storeid){
    $('#kds_resultsTable tbody').append('<tr></tr>'); //tr:nth-child('+(i)+')'
    for (var a=1; a<=x; a++) {
        if(a==1){
            $('#kds_resultsTable tbody tr:nth-child('+(i)+')').append($.parseHTML("<td class='"+i+"'></td>"));
        }else{
            $('#kds_resultsTable tbody tr:nth-child('+(i)+')').append($.parseHTML("<td class='"+i+" kds_elementstoreid_"+storeid+"></td>"));
        }
    }
}

但是，如果 x 确实是 3（表明 else 情况应该被打印两次），HTML 输出是这样的（以单个表格行为例）：

<tr>
    <td class="5 kds_elementsstoreid_4"></td>
</tr>

看起来 .append 覆盖了之前在 for 循环中附加的文本，只剩下循环最后一次迭代中生成的 HTML。我预计会有 3 个 <td></td> 元素，而不仅仅是一个。

.append() 是在这里使用的正确 jQuery 函数，还是应该使用其他不会覆盖我以前的内容的东西？如果不使用.append()，我不确定另一种方法可以在这里实现我想做的事情。

作为参考，我使用的是 jQuery 的最新可用版本（截至 2013 年 15 月 3 日）。

【问题讨论】：

标签： jquery for-loop append

【解决方案1】：

回答您的问题：是的，.append() 是正确调用的函数。它不应该覆盖之前附加的<td> 元素。

我看不出您的代码有什么问题。看起来“i”参数应该与新附加行的编号匹配，以便tr:nth-child(i) 引用该行。

我建议重写这个函数以避免使用tr:nth-child(i)。

你可以试试这样的：

function addNewTableRow(x, i, storeid) {
    var $row = $('<tr></tr>');
    for (var a = 1; a <= x; a++) {
        var $cell = $('<td class="' + i + '"></td>');
        if (a > 1) {
            $cell.addClass('kds_elementstoreid_'+ storeid);
        }
        $row.append($cell);
    }
    $('#kds_resultsTable').find('tbody').append($row);
}

注意：我认为没有必要调用$.parseHTML()，但这不是问题。

【讨论】：

【解决方案2】：

在这里，您忘记了 else 语句中的最后一个单引号。改变这个

else{
            $('#kds_resultsTable tbody tr:nth-child('+(i)+')').append($.parseHTML("<td class='"+i+" kds_elementstoreid_"+storeid+"></td>"));
        }

到这里

else{
            $('#kds_resultsTable tbody tr:nth-child('+(i)+')').append($.parseHTML("<td class='"+i+" kds_elementstoreid_"+storeid+"'></td>"));
        }

http://jsfiddle.net/Eru5M/7/

【讨论】：

【解决方案3】：

不要使用追加，而是尝试使用 .after();

$('#kds_resultsTable tbody').after('<tr></tr>'); //tr:nth-child('+(i)+')'
for (var a=1; a<=x; a++) {
    if(a==1){
        $('#kds_resultsTable tbody tr:nth-child('+(i)+')').append($.parseHTML("<td     class='"+i+"'></td>"));
    }else{
        $('#kds_resultsTable tbody tr:nth-child('+(i)+')').append($.parseHTML("<td class='"+i+" kds_elementstoreid_"+storeid+"></td>"));
    }
}

【讨论】：

【解决方案4】：

如果你传递 i = 1，它会一直寻找第一个元素吗？

尝试将其更改为：

$('#kds_resultsTable tbody tr:nth-child('+(a)+')')

还有

        $('#kds_resultsTable tbody tr:nth-child('+(i)+')').append($.parseHTML("<td class='"+i+" kds_elementstoreid_"+storeid+"></td>"));

看起来它缺少一个结束撇号。

【讨论】：