2

这个问题背后的动机是理解为什么下面的 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 包装的）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>
4

2 回答 2

1

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);
});

演示：小提琴

于 2013-08-29T03:15:11.467 回答
1

你可以从一个 DOMElements 数组中创建一个新的 jQuery 对象，而不是从一个jQuery对象数组中，所以这一行是错误的：

var $tds = $(tds);

修复它的最简单方法是更改$('<td>')​​为$('<td>')[0], 以获取实际的<td>DOMElement。你也可以document.createElement('td')在那里使用。

于 2013-08-29T03:13:41.193 回答