Jquery的.append过写入

我有以下jQuery代码（x是3，i是1和STOREID为4）：Jquery的.append过写入

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（指示其他情况下应印刷恰好两次）HTML输出是该（单一的表格行作为例子）：

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

这样看来，在.append被重写循环在先前所附文本并只留下我与HTML在循环的最后一次迭代中产生。我会期待3 <td></td>元素，而不只是一个。

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

作为一个参考点，我使用的是最新版本的jQuery（截至15/3/13）。

来源

2013-03-17 jamesk5

重现上http://jsfiddle.net – zerkms 2013-03-17 23:24:07

回答你的问题：是的，.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()是必要的，但他们不是问题。

来源

2013-03-17 23:39:45

感谢约翰的S - 看起来像是一个工作就像一个魅力。在这种情况下，为什么我应该尝试和避免n-child（）有没有特别的原因？我有$ .parseHTML（）在那里调用，以排除我的HTML字符串不被拾取为HTML的可能性。 :) – jamesk5 2013-03-17 23:56:19

据我所知，'nth-child'工作正常，但我认为没有它的代码更有效率。总的来说，将选择器降到最低是更有效率的。 – 2013-03-18 00:47:03

我刚刚尝试了您的原始代码，发现您错过了关于“class”属性的单引号。这是造成这个问题。我看到@MorningDew找到了同样的东西。我想另外一个要避免的是由于这样的错误而导致的大量字符串连接。 – 2013-03-18 00:50:41

而不是使用append，尝试使用.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>")); 
    } 
}

来源

2013-03-17 23:32:45 tymeJV

如果你传递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>"));

看起来像是缺少一个右撇号。

来源

2013-03-17 23:45:37 Mupps

i变量定义行 - 我遇到的问题是每行内部的列/单元格不是行本身。虽然谢谢！ :) – jamesk5 2013-03-17 23:54:35

啊我的坏！很高兴它现在全部排序 – Mupps 2013-03-17 23:59:10

在这里，你忘了你的其他语句中的最后一个单引号。改变这种

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/

来源

2013-03-17 23:51:09 MorningDew

+1 - 很好找。 – 2013-03-18 00:51:35

Jquery的.append过写入

回答

相关问题