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简单体验
Jan 10 Javascript
表单元素事件 (Form Element Events)
Jul 17 Javascript
模拟select的代码
Oct 19 Javascript
批量实现面向对象的实例代码
Jul 01 Javascript
javascript多行字符串的简单实现方式
May 04 Javascript
详细分析JavaScript变量类型
Jul 08 Javascript
javascript实现点击单选按钮链接转向对应网址的方法
Aug 12 Javascript
自动适应iframe右边的高度
Dec 22 Javascript
JavaScript之Date_动力节点Java学院整理
Jun 28 Javascript
解决axios发送post请求返回400状态码的问题
Aug 11 Javascript
javascript事件监听与事件委托实例详解
Aug 16 Javascript
对layui数据表格动态cols(字段)动态变化详解
Oct 25 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
重置版战役片段
2020/04/09 魔兽争霸
PHP Token(令牌)设计
2008/03/15 PHP
PHP 下载文件时如何自动添加bom头及解释BOM头和去掉bom头的方法
2016/01/04 PHP
PHP常用设计模式之委托设计模式
2016/02/13 PHP
PHP 年月日的三级联动实例代码
2017/05/24 PHP
php慢查询日志和错误日志使用详解
2021/02/27 PHP
window.open的功能全解析
2006/10/10 Javascript
IE6下CSS图片缓存问题解决方法
2010/12/09 Javascript
js简单的弹出框有关闭按钮
2014/05/05 Javascript
浅析jQuery Ajax请求参数和返回数据的处理
2016/02/24 Javascript
给Easyui-Datebox设置隐藏或者不可用的解决方法
2017/05/26 Javascript
Angular2仿照微信UI实现9张图片上传和预览的示例代码
2017/10/19 Javascript
ES6解构赋值的功能与用途实例分析
2017/10/31 Javascript
vue cli升级webapck4总结
2018/04/04 Javascript
webpack公共组件引用路径简化小技巧
2018/06/15 Javascript
jquery实现点击弹出对话框
2020/02/08 jQuery
vue中 v-for循环的用法详解
2020/02/19 Javascript
Vue CLI4 Vue.config.js标准配置(最全注释)
2020/06/05 Javascript
javascript的hashCode函数实现代码小结
2020/08/11 Javascript
[03:24]2014DOTA2国际邀请赛 神秘商店生意火爆
2014/07/18 DOTA
[02:28]DOTA2 2017国际邀请赛小组赛回顾
2017/08/09 DOTA
Python使用ConfigParser模块操作配置文件的方法
2018/06/29 Python
使用python验证代理ip是否可用的实现方法
2018/07/25 Python
浅谈python常用程序算法
2019/03/22 Python
css3绘制百度的小度熊
2018/10/29 HTML / CSS
描述内存分配方式以及它们的区别
2016/10/15 面试题
百度吧主申请感言
2014/01/12 职场文书
2014年小学元旦活动方案
2014/02/12 职场文书
早会主持词
2014/03/17 职场文书
个人主要事迹材料
2014/08/26 职场文书
公司离职证明样本
2014/09/13 职场文书
违纪检讨书范文
2015/01/27 职场文书
医院感染管理制度
2015/08/05 职场文书
安全生产奖惩制度
2015/08/06 职场文书
Nginx搭建rtmp直播服务器实现代码
2021/03/31 Servers
Vue的过滤器你真了解吗
2022/02/24 Vue.js