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 相关文章推荐
从Ajax到JQuery Ajax学习
Feb 14 Javascript
关于hashchangebroker和statehashable的补充文档
Aug 08 Javascript
jquery自定义属性(类型/属性值)
May 21 Javascript
javascript中声明函数的方法及调用函数的返回值
Jul 22 Javascript
判断浏览器的内核及版本号方法汇总
Jan 05 Javascript
JS给Textarea文本框添加行号的方法
Aug 20 Javascript
Ajax异步获取html数据中包含js方法无效的解决方法
Feb 20 Javascript
AngularJS路由Ui-router模块用法示例
May 29 Javascript
微信小程序事件对象中e.target和e.currentTarget的区别详解
May 08 Javascript
JavaScript实现单图片上传并预览功能
Sep 30 Javascript
浅谈JavaScript中等号、双等号、 三等号的区别
Aug 06 Javascript
vue+elementui通用弹窗的实现(新增+编辑)
Jan 07 Vue.js
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+AJAX实现无刷新注册(带用户名实时检测)
2007/01/02 PHP
PHP设置一边执行一边输出结果的代码
2013/09/30 PHP
CodeIgniter中使用cookie的三种方式详解
2014/07/18 PHP
浅谈PHP中单引号和双引号到底有啥区别呢?
2015/03/04 PHP
PHP实现抓取迅雷VIP账号的方法
2015/07/30 PHP
php结合web uploader插件实现分片上传文件
2016/05/10 PHP
判断iframe是否加载完成的完美方法
2010/01/07 Javascript
jQuery使用动态渲染表单功能完成ajax文件下载
2013/01/15 Javascript
javascript ready和load事件的区别示例介绍
2013/08/30 Javascript
JS,Jquery获取select,dropdownlist,checkbox下拉列表框的值(示例代码)
2014/01/11 Javascript
JavaScript实现多个重叠层点击切换效果的方法
2015/04/24 Javascript
深入浅析AngularJS中的一次性数据绑定 (bindonce)
2017/05/11 Javascript
详解开发react应用最好用的脚手架 create-react-app
2018/04/24 Javascript
koa2使用ejs和nunjucks作为模板引擎的使用
2018/11/27 Javascript
JavaScript类的继承多种实现方法
2020/05/30 Javascript
[02:04]2014DOTA2国际邀请赛 DK一个时代的落幕
2014/07/21 DOTA
举例讲解如何在Python编程中进行迭代和遍历
2016/01/19 Python
Apache如何部署django项目
2017/05/21 Python
python 使用pandas计算累积求和的方法
2019/02/08 Python
Django框架封装外部函数示例
2019/05/28 Python
python os.fork() 循环输出方法
2019/08/08 Python
python sqlite的Row对象操作示例
2019/09/11 Python
python mqtt 客户端的实现代码实例
2019/09/25 Python
在终端启动Python时报错的解决方案
2020/11/20 Python
基于 HTML5 的 WebGL 3D 版俄罗斯方块的示例代码
2018/05/28 HTML / CSS
数控专业个人求职信范例
2013/11/29 职场文书
党员违纪检讨书
2014/02/18 职场文书
小学班长竞选演讲稿
2014/04/24 职场文书
社区五一劳动节活动总结
2015/02/09 职场文书
2015年试用期自我评价范文
2015/03/10 职场文书
银行反洗钱宣传活动总结
2015/05/08 职场文书
《我们的民族小学》教学反思
2016/02/19 职场文书
2016年优秀共产党员先进事迹材料
2016/02/29 职场文书
导游词之南京中山陵
2019/11/27 职场文书
创作书写之导游词实用技巧分享(干货)
2019/12/20 职场文书
python实现简单反弹球游戏
2021/04/12 Python