Jquery实现获取子元素的方法分析


Posted in jQuery onAugust 24, 2019

本文实例讲述了Jquery实现获取子元素的方法。分享给大家供大家参考,具体如下:

Jquery获取子元素的方法有2种,分别是children()方法和find()方法。下面我们分别来使用这两种方法,看看它们有何差异。

1.children()方法:获取该元素下的直接子集元素

2.find()方法:获取该元素下的所有子集元素

分别以以下HTML代码为例:

<ul>
  <li>
    list1
    <ul>
      <li>
        list1-1
      </li>
      <li>
        list1-2
      </li>
    </ul>
  </li>
  <li>
    list2
    <ul>
      <li>
        list2-1
      </li>
      <li>
        list2-2
      </li>
    </ul>
  </li>
  <li>
    list3
    <ul>
      <li>
        list3-1
      </li>
      <li>
        list3-2
      </li>
    </ul>
  </li>
</ul>

3、children()方法获取ul下面直接子集元素li:$("ul").children("li")

需要注意的是,如果li元素下还有li元素,children方法将不会被获取。我们可以用length来测试获取的个数“$("ul").children("li").length”,最后输出结果为3

4、find()方法获取ul下所有元素li:$("ul").find("li")

需要注意的是,find方法会无限循环查找ul标签节点下的li,一直找到没有为止,用length来测试获取个数“$("ul").find("li").length”,最后输出结果为9

5、children和find的区别:children只会查找直接子集,而find会跨越层级查找,一直找到没有为止。

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery中clone()函数实现表单中增加和减少输入项
May 13 jQuery
Jquery把获取到的input值转换成json
May 15 jQuery
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
Nov 08 jQuery
jQuery+ajax实现动态添加表格tr td功能示例
Apr 23 jQuery
js/jquery遍历对象和数组的方法分析【forEach,map与each方法】
Feb 27 jQuery
jquery实现二级导航下拉菜单效果实例
May 14 jQuery
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
May 17 jQuery
使用jquery-easyui的布局layout写后台管理页面的代码详解
Jun 19 jQuery
jQuery实现简单弹幕效果
Nov 28 jQuery
Jquery Datatables的使用详解
Jan 30 jQuery
jQuery实现html可联动的百分比进度条
Mar 26 jQuery
jQuery列表动态增加和删除的实现方法
Nov 05 jQuery
jquery分页优化操作实例分析
Aug 23 #jQuery
jquery实现的分页显示功能示例
Aug 23 #jQuery
jQuery表单选择器用法详解
Aug 22 #jQuery
详解webpack引用jquery(第三方模块)的三种办法
Aug 21 #jQuery
jquery树形插件zTree高级使用详解
Aug 16 #jQuery
jQuery zTree树插件的使用教程
Aug 16 #jQuery
jQuery zTree插件快速实现目录树
Aug 16 #jQuery
You might like
WHOIS类的修改版
2006/10/09 PHP
MyEclipse常用配置图文教程
2014/09/11 PHP
PHP如何将log信息写入服务器中的log文件
2015/07/29 PHP
基于php实现的php代码加密解密类完整实例
2016/10/12 PHP
Laravel 框架返回状态拦截代码
2019/10/18 PHP
Flash+XML滚动新闻代码 无图片 附源码下载
2007/11/22 Javascript
jQuery不间断滚动效果(模拟百度新闻支持文字/图片/垂直滚动)
2013/02/05 Javascript
js中符号转意问题示例探讨
2013/08/19 Javascript
深入理解JavaScript 函数
2016/06/06 Javascript
jQuery移除或禁用html元素点击事件常用方法小结
2017/02/10 Javascript
js遍历添加栏目类添加css 再点击其它删除css【推荐】
2018/06/12 Javascript
vue实现简单的星级评分组件源码
2018/11/16 Javascript
vue+iview/elementUi实现城市多选
2019/03/28 Javascript
微信接入之获取用户头像的方法步骤
2019/09/23 Javascript
vue实现简单跑马灯效果
2020/05/25 Javascript
element-ui点击查看大图的方法示例
2020/12/14 Javascript
使用70行Python代码实现一个递归下降解析器的教程
2015/04/17 Python
python使用post提交数据到远程url的方法
2015/04/29 Python
Python利用BeautifulSoup解析Html的方法示例
2017/07/30 Python
Python实现KNN邻近算法
2021/01/28 Python
Python编程深度学习绘图库之matplotlib
2018/12/28 Python
python覆盖写入,追加写入的实例
2019/06/26 Python
django如何通过类视图使用装饰器
2019/07/24 Python
python smtplib发送多个email联系人的实现
2020/10/09 Python
新百伦折扣店:Joe’s New Balance Outlet
2016/08/20 全球购物
ToysRus日本官网:玩具反斗城
2018/09/08 全球购物
英国屋顶用品和材料超市:Roofing Supplies UK
2019/08/24 全球购物
财务会计毕业生自荐信
2013/11/02 职场文书
个人求职信范文分享
2013/12/13 职场文书
项目管理计划书
2014/01/09 职场文书
销售冠军获奖感言
2014/02/03 职场文书
行政经理岗位职责
2015/04/15 职场文书
2015年公司后勤管理工作总结
2015/05/13 职场文书
2016年大学生就业指导课心得体会
2015/10/09 职场文书
《颐和园》教学反思
2016/02/19 职场文书
MySQL命令无法输入中文问题的解决方式
2021/08/30 MySQL