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 相关文章推荐
JQuery插件Style定制化方法的分析与比较
May 03 Javascript
jquery实现智能感知连接外网搜索
May 21 Javascript
jquery实现LED广告牌旋转系统图片切换效果代码分享
Aug 26 Javascript
Angular指令封装jQuery日期时间插件datetimepicker实现双向绑定示例
Jan 22 Javascript
基于JavaScript实现报警器提示音效果
Oct 27 Javascript
jquery引入外部CDN 加载失败则引入本地jq库
May 23 jQuery
微信小程序实现自定义picker选择器弹窗内容
May 26 Javascript
微信小程序入口场景的问题集合与相关解决方法
Jun 26 Javascript
Vue 实现显示/隐藏层的思路(加全局点击事件)
Dec 31 Javascript
JS实现横向轮播图(初级版)
Jun 24 Javascript
微信小程序实现身份证取景框拍摄
Sep 09 Javascript
React 并发功能体验(前端的并发模式)
Jul 01 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设计模式 FlyWeight (享元模式)
2011/06/26 PHP
PHP实现的交通银行网银在线支付接口ECSHOP插件和使用例子
2014/05/10 PHP
php使用MySQL保存session会话的方法
2015/06/26 PHP
Yii快速入门经典教程
2015/12/28 PHP
php使用curl详细解析及问题汇总
2016/08/11 PHP
php+jQuery实现的三级导航栏下拉菜单显示效果
2017/08/10 PHP
php中各种定义变量的方法小结
2017/10/18 PHP
PHP根据树的前序遍历和中序遍历构造树并输出后序遍历的方法
2017/11/10 PHP
JS 控制CSS样式表
2009/08/20 Javascript
js修改input的type属性问题探讨
2013/10/12 Javascript
JavaScript实现的encode64加密算法实例分析
2015/04/15 Javascript
AngularJs Scope详解及示例代码
2016/09/01 Javascript
把json格式的字符串转换成javascript对象或数组的方法总结
2016/11/03 Javascript
关于HTML5的data-*自定义属性的总结
2018/05/05 Javascript
vue store之状态管理模式的详细介绍
2019/06/13 Javascript
微信小程序Echarts图表组件使用方法详解
2019/06/25 Javascript
超简单的微信小程序轮播图
2019/11/22 Javascript
Nodejs文件上传、监听上传进度的代码
2020/03/27 NodeJs
Vue 同步异步存值取值实现案例
2020/08/05 Javascript
在vs code 中如何创建一个自己的 Vue 模板代码
2020/11/10 Javascript
[01:20]DOTA2更新全新英雄 天涯墨客现已加入游戏
2018/08/25 DOTA
Python中time模块与datetime模块在使用中的不同之处
2015/11/24 Python
Python制作词云的方法
2018/01/03 Python
Numpy截取指定范围内的数据方法
2018/11/14 Python
对python模块中多个类的用法详解
2019/01/10 Python
python基于三阶贝塞尔曲线的数据平滑算法
2019/12/27 Python
Django用户登录与注册系统的实现示例
2020/06/03 Python
python 读取yaml文件的两种方法(在unittest中使用)
2020/12/01 Python
浅谈Html5移动端ios/Android兼容性总结
2018/06/01 HTML / CSS
年度考核自我鉴定
2013/11/09 职场文书
中国央视网签名寄语
2014/01/18 职场文书
企业人事任命书
2014/06/05 职场文书
2015年暑期社会实践活动总结
2015/03/27 职场文书
诚实守信主题班会
2015/08/13 职场文书
创业计划书之牛肉汤快餐店
2019/10/08 职场文书
海弦WR-800F
2022/04/05 无线电