<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. Introduction to 3D Game Programming with DirectX 12 学习笔记之 --- 第二十一章:环境光遮蔽(AMBIENT OCCLUSION)

    原文:Introduction to 3D Game Programming with DirectX 12 学习笔记之 --- 第二十一章:环境光遮蔽(AMBIENT OCCLUSION) 学习目标 ...

  2. Limboy:自学 iOS 开发的一些经验

    不知不觉作为 iOS 开发也有两年多的时间了,记得当初看到 OC 的语法时,愣是被吓了回去,隔了好久才重新耐下心去啃一啃.啃了一阵,觉得大概有了点概念,看到 Cocoa 那么多的 Class,又懵了, ...

  3. nodeJs学习-10 模板引擎 ejs语法案例

    ejs语法案例 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <t ...

  4. beanstalkd 启动跟停止

    启动命令: nohup /usr/bin/beanstalkd -l xxx.xxx.xxx.xxx -p 11300 & >> /dev/null 2>&1 正常启 ...

  5. 笔记:在 Windows 10 WSL Ubuntu 18.04 安装 Odoo12 (2019-06-09)

    笔记:在 Windows 10 WSL Ubuntu 18.04 安装 Odoo12 原因 为了和服务器一样的运行环境. 使用 Ubuntu 运行 Odoo 运行更快. 方便使用 Windows 10 ...

  6. 在window.onload中使用setTimeout

    window.onload = function(){ function n(i){ alert(1); } setTimeout('n(1)',2000); } 以上代码会报错:n() is not ...

  7. Mysql----linux下安装和使用

    一.安装 安装环境centOS,MySQL 使用yum安装mysql 1. 下载rpm [root@CoderMrD admin]# wget -i -c http://dev.mysql.com/g ...

  8. spring+springMVC+Mybatis架构下采用AbstractRoutingDataSource、atomikos、JTA实现多数据源灵活切换以及分布式事务管理

    背景: 1.系统采用SSM架构.需要在10多个MYSQL数据库之间进行切换并对数据进行操作,上篇博文<springMVC+Mybatis(使用AbstractRoutingDataSource实 ...

  9. python 数据的读取

  10. @总结 - 12@ burnside引理与pólya定理

    目录 @0 - 参考资料@ @1 - 问题引入@ @2 - burnside引理@ @3 - pólya定理@ @4 - pólya定理的生成函数形式@ @0 - 参考资料@ 博客1 @1 - 问题引 ...