Jquery中children与find之间的区别详细解析


Posted in Javascript onNovember 29, 2013

首先看一段HTML代码,如下:

<table id="tb">
            <tr>
                <td>0</td>
                <td>1</td>
                <td>2</td>
            </tr>
            <tr>
                <td>3</td>
                <td>4</td>
                <td>5</td>
            </tr>
 </table>

如果我要获取第二个tr里的第二个td的值:

Children:

$("#tb>tbody").children("tr:eq(1) td:eq(1)").html()

Find    :
$("#tb>tbody").find("tr:eq(1) td:eq(1)").html()

  结果,通过children获取的值为:null,而通过find获取的值为:4 这是为什么呢?

  查了一下资料,通过children获取的是该元素的下级元素,而通过find获取的是该元素的下级所有元素。

  这时回到上面,我们可以得出,$("#tb>tbody").children() 获取的是两个tr元素(不包括它们子元素td),

  而children里面的选择器则是在获取的两个tr元素里再根据条件进行筛选,所以上面那种写法获取不到值。

  如果一定用children我们可以这样写:

$("#tb>tbody").children("tr:last").children("td:eq(1)").html()
Javascript 相关文章推荐
JS 控制小数位数的实现代码
Aug 02 Javascript
jQuery 翻牌或百叶窗效果(内容三秒自动切换)
Jun 14 Javascript
上传图片js判断图片尺寸和格式兼容IE
Sep 01 Javascript
javascript 对象数组根据对象object key的值排序
Mar 09 Javascript
jquery插件splitScren实现页面分屏切换模板特效
Jun 16 Javascript
详解angular 中的自定义指令之详解API
Jun 20 Javascript
详解利用jsx写vue组件的方法示例
Jul 17 Javascript
Vue 项目代理设置的优化
Apr 17 Javascript
Django+Vue实现WebSocket连接的示例代码
May 28 Javascript
Vue CLI项目 axios模块前后端交互的使用(类似ajax提交)
Sep 01 Javascript
vue登录以及权限验证相关的实现
Oct 25 Javascript
vue之a-table中实现清空选中的数据
Nov 07 Javascript
JS关键字球状旋转效果的实例代码
Nov 29 #Javascript
JS Loading功能的简单实现
Nov 29 #Javascript
分享Javascript中最常用的55个经典小技巧
Nov 29 #Javascript
浅析JavaScript中的类型和对象
Nov 29 #Javascript
JavaScript中创建类/对象的几种方法总结
Nov 29 #Javascript
转换字符串为json对象的方法详解
Nov 29 #Javascript
javascript对下拉列表框(select)的操作实例讲解
Nov 29 #Javascript
You might like
php删除页面记录 同时刷新页面 删除条件用GET方式获得
2012/01/10 PHP
国外PHP程序员的13个好习惯小结
2012/02/20 PHP
CI框架源码解读之利用Hook.php文件完成功能扩展的方法
2016/05/18 PHP
javascript 面向对象编程 function也是类
2009/09/17 Javascript
jquery特效 点击展示与隐藏全文
2015/12/09 Javascript
js一维数组、多维数组和对象的混合使用方法
2016/04/03 Javascript
微信小程序 登陆流程详细介绍
2017/01/17 Javascript
微信小程序开发之实现自定义Toast弹框
2017/06/08 Javascript
Bootstrap响应式导航由768px变成992px的实现代码
2017/06/15 Javascript
javascript深拷贝、浅拷贝和循环引用深入理解
2018/05/27 Javascript
JS中call()和apply()的功能及用法实例分析
2019/06/28 Javascript
jquery ajax 请求小技巧实例分析
2019/11/11 jQuery
webstorm建立vue-cli脚手架的傻瓜式教程
2020/09/22 Javascript
解决VueCil代理本地proxytable无效报错404的问题
2020/11/07 Javascript
Python程序设计入门(4)模块和包
2014/06/16 Python
python socket 超时设置 errno 10054
2014/07/01 Python
简单解决Python文件中文编码问题
2015/11/22 Python
使用Python机器学习降低静态日志噪声
2018/09/29 Python
Python3.5基础之NumPy模块的使用图文与实例详解
2019/04/24 Python
django数据库自动重连的方法实例
2019/07/21 Python
python 正则表达式贪婪模式与非贪婪模式原理、用法实例分析
2019/10/14 Python
python 录制系统声音的示例
2020/12/21 Python
HTML5 拖拽批量上传文件的示例代码
2018/03/28 HTML / CSS
Canon佳能美国官方商店:购买数码相机、数码单反相机、镜头和打印机
2016/11/15 全球购物
澳大利亚在线高跟鞋商店:Shoe Me
2019/11/19 全球购物
傲盾软件面试题
2015/08/17 面试题
医学专业毕业生推荐信
2013/11/14 职场文书
校三好学生主要事迹
2014/01/11 职场文书
食品厂厂长岗位职责
2014/01/30 职场文书
八项规定整改措施
2014/02/12 职场文书
学生周末长期请假条
2014/02/15 职场文书
五一口号
2014/06/19 职场文书
党的群众路线教育实践活动个人对照检查材料(教师)
2014/11/04 职场文书
汽车质检员岗位职责
2015/04/08 职场文书
2015仓库保管员年终工作总结
2015/05/13 职场文书
详解Anyscript开发指南绕过typescript类型检查
2022/09/23 Javascript