Question

这个问题背后的动机是理解下面的jQuery片段失败的原因。

注意：由于愚蠢，盲目的反复试验，我找到了可行（或似乎）的替代代码。因此，这个问题的目的不是（本身）“修复”下面显示的问题。相反，我的目标是尽可能地理解为什么它失败。

    jQuery(document).ready(function ($) {
      var tds = [];
      for (var i = 0; i < 3; ++i) {
        var td = $('<td>');
        tds.push(td);
      }
      var $tds = $(tds);
      var $row1 = $('#row1');
      $tds.appendTo($row1);
    });

基本上，代码段的目的是创建三个（jQuery-wrapped）td元素，然后将它们附加到预先存在的tr。（在这篇文章的最后，我复制了完整的HTML + CSS + JS代码。）

如前所述，我的目标是了解此代码段失败的原因。因此，这个问题主要针对那些在不运行代码的情况下已经看到代码片段失败的人。对于那些能够这样做的人：你的理由是什么？究竟是什么告诉你这个片段无法正常工作？

这是完整的代码：

<!DOCTYPE html>
<html>
  <head>
    <title>title</title>
    <meta charset="utf-8">
    <style>
    td{width:100px;height:20px;background:#C40000}
    </style>
  </head>
  <body>
    <table>
      <tr id="row1"></tr>
    </table>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script>
    jQuery(document).ready(function ($) {
      var tds = [];
      for (var i = 0; i < 3; ++i) {
        var td = $('<td>');
        tds.push(td);
      }
      var $tds = $(tds);
      var $row1 = $('#row1');
      $tds.appendTo($row1);
    });
    </script>
  </body>
</html>

Answer 1

您可以从jQuery个对象的数组中的DOMElements数组 not 创建一个新的jQuery对象，所以这一行是错的：

var $tds = $(tds);

解决问题的最简单方法是将$('<td>')更改为$('<td>')[0]，以获得实际的<td> DOMElement。您也可以在那里使用document.createElement('td')。

Answer 2

AFAIK jQuery无法将jQuery包装器数组转换为单个包装器对象，试试这个

jQuery(function ($) {
    var $tds = $();
    for (var i = 0; i < 3; ++i) {
        var td = $('<td/>', {
            text: i
        });
        $tds = $tds.add(td);
    }
    var $row1 = $('#row1');

    $tds.appendTo($row1);
});

演示：Fiddle

由于jQuery片段无法将TD附加到TR而感到困惑

2 个答案: