-
WEB前端
站-
热门城市 全国站>
-
其他省市
-
-
400-636-0069
沉沙
2018-06-07
来源 ：
阅读 871
评论 0
摘要：本文讲解了jQuery 找不到 div 中 tr 子元素的问题解决方法，希望阅读本篇文章以后大家有所收获，帮助大家对jQuery的理解更加深入。
问题
在实现 点击添加按钮，表单中会添加一行输入项 功能的时候，想出的解决方案为：
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>
// JavaScriptvar $template = $('#js-template').find('.js-item').clone();
$('#js-add').click(function(){
$('#js-item-container').append($template);
});可是这样写并不能实现想要的功能，使用 Chrome 的调试工具发现使用 $('#js-template').find('.js-item') 并不能获取到想要的 tr 元素，如下图：
使用 $('#js-template').html() 检查后发现了问题所在：在浏览器解析和渲染之后 tr 标签没了，所以这里是找不到 .js-item 元素的。
2. 解决方法
将包裹 tr 的 div 标签换做 table 即可。猜测 tr 不能脱离 父标签 table 存在。此外，由于 table 会自动在 tr 标签前加上 tbody 标签，所以使用 children('js-item') 也是找不到的，需要使用 find() 方法。
本文由职坐标整理发布，更多相关内容，请关注职坐标WEB前端jQuery频道！
喜欢 | 0
不喜欢 | 0
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了，明天再试试吧！
我们会在第一时间安排职业规划师联系您！
您也可以联系我们的职业规划师咨询：
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com，All Rights Reserved.
沪公网安备 31011502005948号
索取资料
答疑解惑
技术交流
职业测评
面试技巧
高薪秘笈
