jQuery 找不到 div 中 tr 子元素的问题
1. 问题
在实现 点击添加按钮,表单中会添加一行输入项
功能的时候,想出的解决方案为:
添加一个隐藏的 div,div 标签中为输入项模板;
用 js 获取该模板下的 tr 元素并赋值(
clone()
方法)给一个 js 变量;当点击添加按钮时,使用
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
元素,如下图:
使用 $('#js-template').html()
检查后发现了问题所在:在浏览器解析和渲染之后 tr
标签没了,所以这里是找不到 .js-item
元素的。
2. 解决方法
将包裹 tr
的 div
标签换做 table
即可。猜测 tr
不能脱离 父标签 table
存在。此外,由于 table
会自动在 tr
标签前加上 tbody
标签,所以使用 children('js-item')
也是找不到的,需要使用 find()
方法。
相关推荐
89423661 2011-11-18
pplxh 2016-01-04
83473469 2018-09-12
ParadiserD 2018-09-12
lylicai 2018-02-07
pplxh 2016-03-30
聆听蘭 2016-01-04
pplxh 2014-04-15
原為簡單 2013-11-06
82483564 2012-12-05
JeWangZhe 2012-11-17
88284453 2011-11-24
gxr 2018-07-16
本文实例讲述了JS与jQuery实现子窗口获取父窗口元素值的方法。分享给大家供大家参考,具体如下:。<input type="button" onclick="window.open" value="
87374459 2017-04-17
82413161 2018-01-21