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

marek 发布于2019-08-22 10:44 / 2782人阅读

摘要：解决方法将包裹的标签换做即可。猜测不能脱离父标签存在。此外，由于会自动在标签前加上标签，所以使用也是找不到的，需要使用方法。

1. 问题

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

添加一个隐藏的 div，div 标签中为输入项模板；

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

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

代码为：

// HTML

// 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() 方法。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/91178.html

JavaWEB开发04——JQuery

摘要：设计的宗旨是，，即倡导写更少的代码，做更多的事情。它封装常用的功能代码，提供一种简便的设计模式，优化文档操作事件处理动画设计和交互。今日任务使用JQuery完成页面定时弹出广告定时器: setInterval clearInterval setTimeout clearTimeout 显示: img.style.display = bloc...

chunquedong 2019-08-29 17:05 评论0 收藏0
JavaWEB开发04——JQuery

摘要：设计的宗旨是，，即倡导写更少的代码，做更多的事情。它封装常用的功能代码，提供一种简便的设计模式，优化文档操作事件处理动画设计和交互。今日任务使用JQuery完成页面定时弹出广告定时器: setInterval clearInterval setTimeout clearTimeout 显示: img.style.display = bloc...

nicercode 2019-08-02 11:51 评论0 收藏0
JavaWEB开发04——JQuery

摘要：设计的宗旨是，，即倡导写更少的代码，做更多的事情。它封装常用的功能代码，提供一种简便的设计模式，优化文档操作事件处理动画设计和交互。今日任务使用JQuery完成页面定时弹出广告定时器: setInterval clearInterval setTimeout clearTimeout 显示: img.style.display = bloc...

pakolagij 2019-08-23 12:34 评论0 收藏0
jQuery 选择器

摘要：选择器选择器一基本选择器语法说明选择文档中的所有元素元素选择器，选择所有的元素，返回数组选择器，返回单个元素选择器，返回数组并列选择器，返回所有的元素和元素二层次选择器语法说明后代选择器，选择所有元素下面的所有子元素，包含非直接 title: jQuery 选择器date: 2017-01-07 20:32:26 tags: [jQuery, 选择器] 一、基本选择器语法说明...

gghyoo 2019-08-20 18:36 评论0 收藏0
jQuery的其他常用知识点

摘要：获取匹配的第一个元素相对于其最近的具有定位即不是的父元素的位置返回不能设置。但是这两种方法的缺点是要绑定的元素必须存在文档中。支持对动态创建的元素有效。解绑所有代理的事件，而元素本身的事件不会被解绑。触发事件响应方法，不触发浏览器行为。选择器 :visible 和 :hidden 匹配显示和隐藏的元素（css-display），需要指明元素或类，因为head、script等元素也是...

tomorrowwu 2019-08-29 17:02 评论0 收藏0