一、获取父级元素

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. 贴一段Matlab代码

    % reduce leading zeros with rx ind3= find(rx~=0, 1, 'first'); if (isempty(ind3)) rx= gf(0, m, f0); e ...

  2. php 每隔30s在页面显示字符串

    例子 // 30秒执行一次 ignore_user_abort(); //即使Client断开(如关掉浏览器),PHP脚本也可以继续执行. set_time_limit(); // 执行时间为无限制, ...

  3. 下载svn

    http://subversion.apache.org/download.cgi?update=201708081800 Windows下载zip,其他系统的下载tar.gz

  4. sql转码

    select               bzj,               sqid,               zcslh,               qymc,               ...

  5. C# WinForm中的一些小问题

    前言 记一些C#窗体应用编程中的小问题. DataGridView 设置Selected = true后实际选中行标依旧是第一行. 通常通过this.dataGridView1.Rows[i].Sel ...

  6. JSON HiJacking攻击

    JSON劫持类似于CSRF攻击,为了了解这种攻击方式,我们先看一下Web开发中一种常用的跨域获取数据的方式:JSONP. 先说一下JSON吧,JSON是一种数据格式,主要由字典(键值对)和列表两种存在 ...

  7. mysql排序字段为空的排在最后面

    排序字段为orderid; 1.使用order by orderid desc实现降序时,orderid 为null数据的会排在数据的最后面: 但是,order by orderid升序时,order ...

  8. 讲座 - Transposable elements, non-coding RNAs and epigenetic control in embryonic stem cells

    Dr. Andrew Paul HutchinsDepartment of BiologySouthern University of Science and Technology, Shenzhen ...

  9. R Shiny app | 交互式网页开发

    网页开发,尤其是交互式动态网页的开发,是有一定门槛的,如果你有一定的R基础,又不想过深的接触PHP和MySQL,那R的shiny就是一个不错的选择. 现在R shiny配合R在统计分析上的优势,可以做 ...

  10. android studio: 对齐成员变量及链式方法

    "File"-"Settings"-"Editor"-"Java"-"Wrapping and Braces& ...