一、获取父级元素

1、 parent([expr]):

获取指定元素的所有父级元素

<div id="par_div"><a id="href_fir" href="#">href_fir</a>
<a id="href_sec" href="#">href_sec</a>
<a id="href_thr" href="#">href_thr</a></div>
<span id="par_span">
<a id="href_fiv" href="#">href_fiv</a>
</span>
$(document).ready(function(){
$("a").parent().addClass('a_par');
});

二、获取同级元素:

1、next([expr]):

获取指定元素的下一个同级元素(注意是下一个同级元素哦)

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript" src="/jquery/jquery.js"></script>
</head>

<body>
<ul>
   <li>list item 1</li>
   <li>list item 2</li>
   <li class="third-item">list item 3</li>
   <li>list item 4</li>
   <li>list item 5</li>
</ul>

<script>
$('li.third-item').next().css('background-color', 'red');
</script>

</body>
</html>

这个例子的结果是,只有list item 4背景色变为红色

2、nextAll([expr]):

获取指定元素后边的所有同级元素

Hello

Hello Again
<div><span>And Again</span></div>

var p_nex = $("p").nextAll();
p_nex.addClass('p_next_all');


注意看最后一个”<p&gt”标签哦,也被加上了’p_next_all’这个类名哦~~

3、andSelf():

获取指定元素后边的所有同级元素,之后加上指定的元素

我感觉这个函数是最有意思的一个函数了,什么意思?直译过来就是”还有我“,”还有自己”,没错,还有自己。

<p>Hello</p><p>Hello Again</p><div><span>And Again</span></div>
var p_nex = $("p").nextAll().andSelf();
p_nex.addClass('p_next_all');

注意看第一个“<p>”标签啊,这句话的意思是选择p标签后面的所有同级标签,以及自己。。。

以下这两个不举具体的例子了,实际上就是next()和nextAll()的相反喽

4、prev():获取指定元素的上一个同级元素(是上一个哦)。

5、prevAll():获取指定元素的前边所有的同级元素。

三、获取子元素

1、查找子元素方式1:>

例如:var aNods = $("ul > a");查找ul下的所有a标签

2、查找子元素方式2:children()

3、查找子元素方式3:find()

这里再简单介绍以下children()和find()的异同:

1> children及find方法都用是用来获得element的子elements的,两者都不会返回 text node,就像大多数的jQuery方法一样。 
2> children方法获得的仅仅是元素一下级的子元素,即:immediate children。 
3> find方法获得所有下级元素,即:descendants of these elements in the DOM tree 
4> children方法的参数selector 是可选的(optionally),用来过滤子元素,

但find方法的参数selector方法是必选的。 
5> find方法事实上可以通过使用 jQuery( selector, context )来实现。即$('li.item-ii').find('li')等同于$('li', 'li.item-ii').

例:

<ul class="level-1">
  <li class="item-i">I</li>
  <li class="item-ii">II
    <ul class="level-2">
      <li class="item-a">A</li>
      <li class="item-b">B
        <ul class="level-3">
          <li class="item-1">1</li>
          <li class="item-2">2</li>
          <li class="item-3">3</li>
        </ul>
      </li>
      <li class="item-c">C</li>
    </ul>
  </li>
  <li class="item-iii">III</li>
</ul>
使用:$('ul.level-2').children().css('border', '1px solid green'); 的效果是:


使用 $('ul.level-2').find('li').css('border', '1px solid green'); 的效果是: 

原文出自http://www.cnblogs.com/Tally/archive/2013/01/04/2844042.html

jquery获取父,同,子级元素的更多相关文章

  1. JQuery获取父,子,兄弟节点

    jQuery.parent(expr) // 查找父节点,可以传入expr进行过滤,比如$("span").parent()或者$("span").parent ...

  2. Jquery遍历之获取子级元素、同级元素和父级元素

    Jquery遍历之获取子级元素.同级元素和父级元素 Jquery的遍历,其实就当前位置的元素相对于其他元素的位置的关系进行查找或选取HTML元素.以某项选择开始,并沿着这条线进行移动,或向上(父级). ...

  3. JS和jQuery获取节点的兄弟,父级,子级元素

    原文转自http://blog.csdn.net/duanshuyong/article/details/7562423 先说一下JS的获取方法,其要比JQUERY的方法麻烦很多,后面以JQUERY的 ...

  4. 转载:js和jquery获取父级元素、子级元素、兄弟元素的方法

    转载网址: 先说一下JS的获取方法,其要比JQUERY的方法麻烦很多,后面以JQUERY的方法作对比. JS的方法会比JQUERY麻烦很多,主要则是因为FF浏览器,FF浏览器会把你的换行也当最DOM元 ...

  5. js和jquery获取父级元素、子级元素、兄弟元素的方法{转}

    先说一下JS的获取方法,其要比JQUERY的方法麻烦很多,后面以JQUERY的方法作对比 JS的方法会比JQUERY麻烦很多,主要则是因为FF浏览器,FF浏览器会把你的换行也当成DOM元素   原生的 ...

  6. JS获取节点的兄弟,父级,子级元素的方法(js获取子级获取到换行与空格元素-FF)

    先说一下JS的获取方法,其要比JQUERY的方法麻烦很多,后面以JQUERY的方法作对比. JS的方法会比JQUERY麻烦很多,主要则是因为FF浏览器,FF浏览器会把你的换行也当最DOM元素 < ...

  7. js与jquery获取父元素,删除子元素的不同方法

    var obj=document.getElementById("id");得到的是dom对象,对该对象进行操作的时候使用js方法 var obj=$("#id" ...

  8. JS获取节点的兄弟,父级,子级元素

    https://blog.csdn.net/duanshuyong/article/details/7562423 先说一下JS的获取方法,其要比JQUERY的方法麻烦很多,后面以JQUERY的方法作 ...

  9. 使用jquery获取父元素或父节点的方法

    今天面试题问到了,没答上,jq要继续学习啊 jquery获取父元素方法比较多,比如parent(),parents(),closest()这些都能帮你实现查找父元素或节点,下面我们来一一讲解: 先举个 ...

  10. 使用jquery获取父元素或父节点

    使用jquery获取父元素或父节点,比较简单,jquery提供了丰富的方法来让我们使用jquery获取父元素或父节点   jquery获取父元素方法比较多,比如parent(),parents(),c ...

随机推荐

  1. 21、Shuffle原理剖析与源码分析

    一.普通shuffle原理 1.图解 假设有一个节点上面运行了4个 ShuffleMapTask,然后这个节点上只有2个 cpu core.假如有另外一台节点,上面也运行了4个ResultTask,现 ...

  2. 编译安装和二进制安装mysql

    二进制安装mysql-5.6.46 mysql二进制安装,已经编译成二进制了,只需要做一些配置即可 [root@localhost ~]$ yum install autoconf libaio -y ...

  3. 《挑战30天C++入门极限》C++面向对象编程入门:构造函数与析构函数

        C++面向对象编程入门:构造函数与析构函数 请注意,这一节内容是c++的重点,要特别注意! 我们先说一下什么是构造函数. 上一个教程我们简单说了关于类的一些基本内容,对于类对象成员的初始化我们 ...

  4. Tkinter 之记事本项目实战

    一.效果图 二.文件 链接:https://pan.baidu.com/s/1CUkfWpfH8t2GSJyy5hYv-A 提取码:5yvn 后续可能做一些功能扩展,有需要源码的可以评论联系我!!!

  5. javascript中对一个对象数组按照对象某个属性进行排序

    需求:对timelist排序 安装keys . 分析:timelist 是个数组对象,里面包含属性 keys,val.这里借助数组sort方法 传入function <script> // ...

  6. 第十六周助教工作总结——NWNU李泓毅

    助教博客链接:https://www.cnblogs.com/NWNU-LHY/ 本次作业的要求:团队项目设计完善&编码:https://www.cnblogs.com/nwnu-daizh/ ...

  7. vue项目用户登录状态管理,vuex+localStorage实现

    安装vuex cnpm install vuex --save-dev

  8. Gated CNN 阅读笔记

    之前看过TCN,稍微了解了一下语言模型,这篇论文也是对语言模型建模,但是由于对语言模型了解不深,一些常用数据处理方法,训练损失的计算包括残差都没有系统的看过,只是参考网上代码对论文做了粗浅的复现.开学 ...

  9. Unity火爆插件Behavior Designer行为树插件学习

    如果要让游戏里的角色或者NPC能执行预设的AI逻辑,最简单的用IF..ELSE...神器既可以实现, 但是再复杂的一般用经典的状态机来切换状态,但是写起来比较麻烦.相对的,行为树(Behavior T ...

  10. RK3399 pro 开发记录

    RK3399有三种启动模式:1.Normal模式:2.Loader模式:3.MaskRom模式.      Normal模式是正常的启动过程,各个组件依次加载,直到正常进入系统.      Loade ...