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 相关文章推荐
javascript实现页面内关键词高亮显示代码
Apr 03 Javascript
node.js中使用q.js实现api的promise化
Sep 17 Javascript
form.submit()不能提交表单的原因分析
Oct 23 Javascript
jQuery实现分隔条左右拖动功能
Nov 21 Javascript
如何让一个json文件显示在表格里【实现代码】
May 09 Javascript
JS数组去重(4种方法)
Mar 27 Javascript
react开发中如何使用require.ensure加载es6风格的组件
May 09 Javascript
微信小程序实现点击按钮移动view标签的位置功能示例【附demo源码下载】
Dec 06 Javascript
解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法
Aug 27 jQuery
node crawler如何添加promise支持
Feb 01 Javascript
JS错误处理与调试操作实例分析
Apr 13 Javascript
vue 数据双向绑定的实现方法
Mar 04 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 SQL防注入代码集合
2008/04/25 PHP
获取URL文件名后缀
2013/10/24 PHP
ThinkPHP查询中的魔术方法简述
2014/06/25 PHP
PHP的fsockopen、pfsockopen函数被主机商禁用的解决办法
2014/07/08 PHP
PHP封装的Twitter访问类实例
2015/07/18 PHP
PHP+Apache环境中如何隐藏Apache版本
2017/11/24 PHP
PHP大文件分块上传功能实例详解
2019/07/22 PHP
YII2框架中ActiveDataProvider与GridView的配合使用操作示例
2020/03/18 PHP
Javascript玩转继承(一)
2014/05/08 Javascript
js实现select组件的选择输入过滤代码
2014/10/14 Javascript
浅析webapp框架AngularUI的demo
2014/12/21 Javascript
jquery制作 随机弹跳的小球特效
2015/02/01 Javascript
Javascript中实现trim()函数的两种方法
2015/02/04 Javascript
JS实现网页右侧带动画效果的伸缩窗口代码
2015/10/29 Javascript
关于cookie的初识和运用(js和jq)
2016/04/07 Javascript
关于json字符串与实体之间的严格验证代码
2016/11/10 Javascript
js的三种继承方式详解
2017/01/21 Javascript
JS滚动到指定位置导航栏固定顶部
2017/07/03 Javascript
手把手教你使用vue-cli脚手架(图文解析)
2017/11/08 Javascript
JavaScript学习总结(一) ECMAScript、BOM、DOM(核心、浏览器对象模型与文档对象模型)
2018/01/07 Javascript
jquery.onoff实现简单的开关按钮功能(推荐)
2018/05/24 jQuery
Vue自定义全局Toast和Loading的实例详解
2019/04/18 Javascript
Python简单实现Base64编码和解码的方法
2017/04/29 Python
Python中生成器和迭代器的区别详解
2018/02/10 Python
深入flask之异步非堵塞实现代码示例
2018/07/31 Python
pycharm新建一个python工程步骤
2019/07/16 Python
Python如何调用JS文件中的函数
2019/08/16 Python
Python中list循环遍历删除数据的正确方法
2019/09/02 Python
澳大利亚体育和露营装备在线/实体零售商:Find Sports
2020/06/03 全球购物
校运会广播稿100字
2014/01/27 职场文书
大二学生职业生涯规划书
2014/02/05 职场文书
创建精神文明单位实施方案
2014/03/08 职场文书
个人三严三实对照检查材料
2014/09/25 职场文书
2014年初中班主任工作总结
2014/11/08 职场文书
2014年爱国卫生工作总结
2014/11/22 职场文书
SQL Server2019数据库备份与还原脚本,数据库可批量备份
2021/11/20 SQL Server