<div class="box">
<div class="item">
<div class="out">
<div class="inside">
666
</div>
</div>
</div>
</div>
<script>
var one = $('.box').children().attr('class'); //item
var two = $('.box').children().find('.out').attr('class');//out
var three = $('.inside').parent().attr('class'); //out
var four = $('.inside').parents('.item').attr('class') //item
</script>

1.选择直接父子元素:

  $(e).parent();

$(e)children()

2.选择多级父子元素:

父:$(e).parents('.box');

子:$(e).children().find('.inside');

3.jquery 对象转 dom

  $(e).get(0);

jquery 选择多级父子元素的更多相关文章

  1. jQuery选择:子代元素与后代元素的区别

    (1)后代元素:html代码如下,那么在jquery选择时,$(".test img"),中间为空格,则是选取后代元素,img对于ul来说是孙子辈元素,中间隔了li元素,所以后代元 ...

  2. jquery选择器之子元素

    HTML代码: :first-child 匹配第一个子元素,每个父元素的第一个子元素 :last-child 匹配最后一个子元素,每个父元素的最后一个子元素 <!DOCTYPE html> ...

  3. jQuery选择器之子元素过滤选择器Demo

    测试代码: 07-子元素过滤选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" & ...

  4. jQuery选择器之子元素选择器

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content ...

  5. 深入学习jQuery选择器系列第二篇——过滤选择器之子元素选择器

    × 目录 [1]通用形式 [2]反向形式 [3]首尾元素 [4]唯一元素 前面的话 在上一篇中已经介绍过基础选择器和层级选择器,本文开始介绍过滤选择器.过滤选择器是jQuery选择器中最为庞大也是最为 ...

  6. JQUERY选择和操作DOM元素(利用正则表达式的方法匹配字符串中的一部分)

    JQUERY选择和操作DOM元素(利用正则表达式的方法匹配字符串中的一部分) 1.匹配属性的开头 $("[attributeName^='value']"); 2.匹配属性的结尾 ...

  7. jQuery选择元素的方法大全

    jQuery选择器其实是一个有些地方比较费解的,如果没有经过多次实验的话,很难得出它的每个操作符到底是干什么的,很容易出错,经过 我的多次测试,终于对一些比较难理解或容易出错的选择操作进行总结,既方便 ...

  8. jQuery——选择元素

    ###理解DOM jQuery最强大的特性之一就是能够简化在DOM中选择元素的任务.**DOM(文档对象模型)**充当了JavaScript与网页之间的接口,它以对象网络而非纯文本的形式来表现HTML ...

  9. jQuery选择器之元素选择器

    元素选择器:根据给定(html)标记名称选择所有的元素. 描述: $('element') 搜索指定元素标签名的所有节点,这是一个合集的操作.同样的也有原生方法getElementsByTagName ...

随机推荐

  1. bzoj3522 Hotel

    Description 有一个树形结构的宾馆,n个房间,n-1条无向边,每条边的长度相同,任意两个房间可以相互到达.吉丽要给他的三个妹子各开(一个)房(间).三个妹子住的房间要互不相同(否则要打起来了 ...

  2. hackerrank---Find a string

    题目链接 在字符串a中查找字符串b出现的次数...貌似不可以用a.count() 附上代码: a = raw_input().strip() b = raw_input().strip() cnt = ...

  3. mysql 语句的查询过程解析

    select * from tb where ID = 1 下面解析的查询过程都是基于上面的简单查询,该系列的所有素材都来自于丁奇的mysql的45讲 1.建立连接 a.客户端发出请求,请求首先到达连 ...

  4. Hibernate 标签: hibernate数据库 2017-01-15 22:03 462人阅读 评论(24)

    什么是hibernate? Hibernate是一个开放源代码的对象关系映射框架,它对JDBC进行了非常轻量级的对象封装,它将POJO与数据库表建立映射关系,是一个全自动的orm框架,hibernat ...

  5. HDU - 1875_畅通工程再续

    畅通工程再续 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Problem Desc ...

  6. Nuxt.js打造旅游网站第1篇_项目环境搭建

    1. 安装 使用官网提供的脚手架工具 create-nuxt-app,创建一个nuxtjs项目. npx create-nuxt-app xianyun 注意:在NPM版本5.2.0默认安装了npx, ...

  7. HLSL效果框架-多光源效果

    原文:HLSL效果框架-多光源效果 昨日不可追, 今日尤可为.勤奋,炽诚,不忘初心 手机淘宝二维码 扫描       或者打开连接:程序设计开发 ,掌声鼓励,欢迎光临.     高级着色器语言(HLS ...

  8. 洞见数据库前沿 集结阿里云数据库最强阵容 DTCC 2019 八大亮点抢先看

    摘要: 作为DTCC的老朋友和全球领先的云计算厂商,阿里云数据库团队受邀参加本次技术盛会,不仅将派出重量级嘉宾阵容,还会为广大数据库业内人士和行业用户奉上8场精彩议题.下面小编就为大家提前梳理了8大亮 ...

  9. laravel拓展validator验证

    https://blog.csdn.net/zl20117/article/details/53536520 首先,扩展的收个问题是,我的扩展类应该放在哪儿才好呢? 直接在app目录下,建立一个目录: ...

  10. phpstorm2017破解版 2017.3.4 官网中文版

    phpstorm2017破解版是一款强大的PHP编程工具,新云软件园提供phpstorm激活下载,最新版PhpStorm 2017正式版改进了PHP 7支持,改进代码完成功能,PhpStorm 是最好 ...