jQuery 找不到 div 中 tr 子元素的问题

1. 问题

在实现 点击添加按钮,表单中会添加一行输入项 功能的时候,想出的解决方案为:

  1. 添加一个隐藏的 div,div 标签中为输入项模板;

  2. 用 js 获取该模板下的 tr 元素并赋值( clone() 方法)给一个 js 变量;

  3. 当点击添加按钮时,使用 append() 将其添加到输入项的上层容器中。

代码为:

// HTML 

<button id="js-add">添加</button>
<table id="js-item-container">

</table>

<div id="js-template" style="display: none;">
<tr class="js-item">
    <td> <input type="text"> </td>
    <td> <input type="password"> </td>
</tr>
</div>
// JavaScript
var $template = $('#js-template').find('.js-item').clone();
$('#js-add').click(function(){
    $('#js-item-container').append($template);
});

可是这样写并不能实现想要的功能,使用 Chrome 的调试工具发现使用 $('#js-template').find('.js-item') 并不能获取到想要的 tr 元素,如下图:

jQuery 找不到 div 中 tr 子元素的问题

使用 $('#js-template').html() 检查后发现了问题所在:在浏览器解析和渲染之后 tr 标签没了,所以这里是找不到 .js-item 元素的。

2. 解决方法

将包裹 trdiv 标签换做 table 即可。猜测 tr 不能脱离 父标签 table 存在。此外,由于 table 会自动在 tr 标签前加上 tbody 标签,所以使用 children('js-item') 也是找不到的,需要使用 find() 方法。

相关推荐