jQuery获取父元素节点、子元素节点及兄弟元素节点的方法

本文实例讲述了jQuery获取父元素节点、子元素节点及兄弟元素节点的方法。分享给大家供大家参考,具体如下:

先来看这段html代码,整个取节点(父、子、兄弟等)的方法都是围绕这段代码来的:

<ul class="par">
  <li id="firstli">
    <h3 class="title">条目一</h3>
    <ul class="par">
      <li id="dwtedx">第一项</li>
      <li>第二项</li>
    </ul>
  </li>
</ul>

JQUERY 父节点的获取:

jquery获取父元素方法比较多、比如parent()、parents()、closest()、find,first-child这些都能帮你实现查找父节点、子节点、兄弟节点

如我们利用parent()来获取父节点

$("#dwtedx").parent().parent();//取得id为firstli的li节点
$("#dwtedx").parent().parent(".par");//取得最上面的ul节点
$("#dwtedx").parent(".par");
//取得向上第一层的ul节点 以上是通过parent的方式来获取父节点的、大家可以根据自己项目需要来选择方法哈

下面、我们主要来讲一下 parents() 和 closest() 两个方法的区别

1、closest从当前元素开始匹配寻找、parents从父元素开始匹配寻找

2、closest逐级向上查找、直到发现匹配的元素后 就停止了、parents一直向上查找直到根元素、然后把这些元素放进一个临时集合中、再用给定的选择器表达式去过滤

3、closest返回0或1个元素、parents可能包含0 个、1个、或者多个元素

代码可以这样写:

$('#dwtedx').parents('.par');//可以找出所有class为.par的节点
$('#dwtedx').closest('.par'); //可以找出一个父节点、就是上面一层的那个

JQUERY 兄弟节点的获取

jQuery兄弟节点获取、我们的思路是通过当前节点找到父节点、然后通过父节点去找到子节点、代码如下

$(".title").parent().find('ul');
//找到自己的兄弟节点ul 就是通过先找到 h3 与 ul 共同的父节点 li 然后来用 find() 找到 ul

还有一种方法是使用 siblings() 函数、代码如下

$(".title").siblings('ul');
//找到自己的兄弟节点ul

JQUERY 子节点的获取

匹配第一个子元素 :first 只匹配一个元素、而此选择符将为每个父元素匹配一个子元素

$(".par:first-child");
//取得id为firstli的节点

通过选择器去获取、代码如下:

$('#firstli h3.title');
//取得条目一的h3

使用find()函数、上面已经说过了、用法一样

$("#firstli").find("h3");
//找到子兄弟节点h3

使用children()函数、代码如下

$("#firstli").children("h3.title");
//取得子节点h3、class为title

更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery遍历算法与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

时间: 2016-04-11

jquery的父、子、兄弟节点查找,节点的子节点循环方法

jQuery.parent(expr)           //找父元素 jQuery.parents(expr)          //找到所有祖先元素,不限于父元素 jQuery.children(expr)        //查找所有子元素,只会找到直接的孩子节点,不会返回所有子孙 jQuery.contents()            //查找下面的所有内容,包括节点和文本. jQuery.prev()                //查找上一个兄弟节点,不是所有的兄弟节点 jQue

jquery插入兄弟节点的操作方法

功能:插入指定元素到父元素的第一个位置(最左边) 实例 $self.prepend($selectLi); 解释 self是selectLi的父元素,把self放在selectLi的最前面(最左边), 移动的是selectLi, append 功能:插入指定元素到父元素的最后面(最右边) after 实例 $firstLi.after($selectLi); 解释 把selectLi放在firstLi的后面(右边), 移动的是selectLi 注意:selectLi和firstLi 是兄弟节点

jquery的父子兄弟节点查找示例代码

jQuery.parent(expr) 找父亲节点,可以传入expr进行过滤,比如$("span").parent()或者$("span").parent(".class") jQuery.parents(expr),类似于jQuery.parents(expr),但是是查找所有祖先元素,不限于父元素 jQuery.children(expr).返回所有子节点,这个方法只会返回直接的孩子节点,不会返回所有的子孙节点 jQuery.contents

Oracle通过递归查询父子兄弟节点方法示例

前言 说到Oracle中的递归查询语法,我觉得有一些数据库基础的童鞋应该都知道,做项目的时候应该也会用到,下面本文就来介绍下关于Oracle通过递归查询父子兄弟节点的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 方法如下: 1.查询某节点下所有后代节点(包括各级父节点) // 查询id为101的所有后代节点,包含101在内的各级父节点 select t.* from SYS_ORG t start with id = '101' connect by parent_

layui中使用jquery控制radio选中事件的示例代码

勾选 form.on('radio(yesHave)', function (data) { $("input[name='hasPrepaidVoucher'][title='有']").attr('checked',true); form.render(); }); 取消勾选 form.on('radio(noIssuer)', function (data) { debugger; $("input[name='voucherIssuer']").remove

jquery Moblie入门—hello world的示例代码学习

1.需要运行JQuery Mobile 移动应用页面,需要下载JQuery Mobile 3个相关插件文件(有多版本),jquery.mobile-1.2.0.min.css.jquery-1.8.3.min.js.jquery.mobile-1.2.0.min.js,JQuery Mobile官网地址:http://jquerymobile.com 2.将插件文件加载到页面中,注意它们的加载顺序,语句如: 复制代码 代码如下: <link href="Css/jquery.mobile-

jquery Mobile入门—外部链接切换示例代码

1.内部链接是通过在<a>标签内将href属性值设为#+id的形式,外链则是在<a>中增加rel属性,并将属性值设为external,如:<a href="about.html" rel="external">3i Studio</a> 2.外部链接切换示例代码: 复制代码 代码如下: <!DOCTYPE HTML > <!DOCTYPE HTML PUBLIC "-//W3C//DTD H

jquery获取子节点和父节点的示例代码

一.获取子节点 比如是一个 id 为 test 的 div元素,我们这样选中,$('#test'),我们要查找这个div下的一个class为demo的span元素,有一下几种方法 1.使用筛选条件 $('#test span.demo') 2.使用find()函数 $('#test').find('span.demo') 3.使用children()函数 $('#test').children('span.demo') 二.获取父节点 jquery获取父元素方法比较多,比如parent(),pa

Jquery动态添加及删除页面节点元素示例代码

通常我们会遇到选中某个条件,然后添加,累计多个后,再进行执行. 废话不多说,直接上代码! 复制代码 代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>Jquery动态添加及删除页面节点</title> <script src="http://code.jquery.com/jquery-1.8.3.min.js&quo

jquery animate图片模向滑动示例代码

这个对象中每个属性都表示一个可以变化的样式属性(如"height"."top"或"opacity"). 注意:所有指定的属性必须用骆驼形式,比如用marginLeft代替margin-left. 而每个属性的值表示这个样式属性到多少时动画结束.如果是一个数值,样式属性就会从当前的值渐变到指定的值.如果使用的是"hide"."show"或"toggle"这样的字符串值,则会为该属性调用默认

jquery+json实现数据列表分页示例代码

该实例中,新闻数据列表未使用表格显示.下面将所有源码附上,其中用到jquery插件. 复制代码 代码如下: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <c: