<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. 转:国内从事CV相关的企业

    http://blog.csdn.net/carson2005/article/details/7356225 经常碰到朋友问我国内从事计算机视觉(CV)领域的公司的发展情况,产品情况,甚至找工作等问 ...

  2. Directx11教程(67) 显示模型文件

    原文:Directx11教程(67) 显示模型文件       在前面的教程中,我们都是通过在ModelClass中直接产生顶点和索引数据,简单的三角形,立方体等等还好说,毕竟比较简单,如何显示复杂的 ...

  3. "NetworkError: 404 Not Found fontawesome-webfont.woff?v=4.0.3

    This worked for me: Add the following lines to your web.config <system.webServer> <staticCo ...

  4. PyCharm切换Python版本

    由于代码格式问题,很多情况下需要我们去切换Python版本,那么在当下火爆的PyCharm中是如何切换Python版本的呢? 打开File菜单,选择Settings: 打开Settings窗口后,选择 ...

  5. PHP实现打印出库单,有没有实现过?

    https://mp.weixin.qq.com/s/X3JldplICRq7KR0HNFcpuw 背景 有时候你在实现一个出库订单之类的功能模块,这里也有可能要你的站点也实现相应的打印出库单预览,今 ...

  6. nodeJs学习-14 mysql数据库学习、Navicat管理工具

    数据库: MySQL   免费.性能非常不错 缺点:集群.容灾稍微弱一点 Oracle 收费.大型应用.金融级.性能非常不错.集群.容灾非常强 缺点:贵 mySQL安装教程--nodeJsz智能社视频 ...

  7. 文字渐变效果:图层中的mask属性

    http://www.cocoachina.com/ios/20150716/12571.html 前言 已经很久没写blog了,最近发生了太多事情,失去了生命中一位很重要的成员,使我不得不放下对技术 ...

  8. oracle函数 RAWTOHEX(c1)

    [功能]将一个二进制构成的字符串转换为十六进制 [参数]c1,二进制的字符串 [返回]字符串 [示例] select RAWTOHEX('A123')  from dual;

  9. tp3 key json 分页

    //json 强制转换为array $arr[$key]['checkpro'] = json_decode($val['checkpro'],JSON_FORCE_ARRAY);    $arr[$ ...

  10. uda 2.C++ 向量

    向量与矩阵代数 学习得不错!你已经学习了大量 C++ 句法.你也许注意到了,使用 C++ 编程无疑比使用 Python 困难.C++ 专为快速执行而设计,使用这门语言,你可以采用许多不同方式达到同一结 ...