Question

我正在创建一个简单的树结构，它将输入字段保存为子视图。每个孩子由一个输入字段和两个按钮组成。一个按钮用于为输入添加子节点，另一个按钮用于删除节点。我的代码显示在下面的代码段中，并且它没有按预期工作。问题是：我不能添加多个孩子，只有一个孩子被添加。

$("#main").on('click', '.add', function() {
  var $td = $(this).parent();
  var $td1 = $('<td>', {
    html: '<input  />      <button class="add">        Add      </button>      <button class="remove">        Remove      </button>'
  });
  console.log($td.children('table').length);
  if ($td.children('table').length)
    $td.children('table').children('tr').append($td1);
  else
    $td.append($('<table>', {
      html: $('<tr>', {
        html: $td1
      })
    }))
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="main" style="width:100%;text-align:center">
  <tr>
    <td>
      <input type="text" />
      <button class="add">
        Add
      </button>
      <button class="remove">
        Remove
      </button>
    </td>
  </tr>
</table>

Answer 1

所有现代浏览器上的浏览器解析器（AFAIK？！）添加TBODY元素。有关详细信息，请参阅this answer。

在您的情况下，这会使$td.children('table').children('tr')返回空匹配集，因为children()仅定位直接后代（一个级别）。

您可以使用find()方法，匹配任何后代：

$td.children('table').find('tr').append($td1);

输入未在第二次点击时附加

1 个答案: