jQuery 遍历 - 祖先:向上遍历 DOM 树,以查找元素的祖先

jQuery 遍历 - 祖先



祖先是父、祖父或曾祖父等等。

通过 jQuery,您能够向上遍历 DOM 树,以查找元素的祖先。


向上遍历 DOM 树

这些 jQuery 方法很有用,它们用于向上遍历 DOM 树:

  • parent()
  • parents()
  • parentsUntil()

jQuery parent() 方法

parent() 方法返回被选元素的直接父元素。

该方法只会向上一级对 DOM 树进行遍历。

下面的例子返回每个 <span> 元素的直接父元素:

实例

$(document).ready(function(){ $("span").parent(); });


jQuery parents() 方法

parents() 方法返回被选元素的所有祖先元素,它一路向上直到文档的根元素 (<html>)。

下面的例子返回所有 <span> 元素的所有祖先:

实例

$(document).ready(function(){
$("span").parents();
});

您也可以使用可选参数来过滤对祖先元素的搜索。

下面的例子返回所有 <span> 元素的所有祖先,并且它是 <ul> 元素:

实例

$(document).ready(function(){
$("span").parents("ul");
});


jQuery parentsUntil() 方法

parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。

下面的例子返回介于 <span> 与 <div> 元素之间的所有祖先元素:

实例

$(document).ready(function(){
$("span").parentsUntil("div");
});

原文地址:https://www.cnblogs.com/peijz/p/12590941.html

时间: 2024-10-25 17:08:57

jQuery 遍历 - 祖先:向上遍历 DOM 树,以查找元素的祖先的相关文章

JavaScript的DOM操作:查找元素节点

概要: 编程接口 可通过 JavaScript 对 HTML DOM 进行访问. 所有 HTML 元素被定义为对象,而编程接口则是对象方法和对象属性. 方法是您能够执行的动作(比如添加或修改元素). 属性是您能够获取或设置的值(比如节点的名称或内容). (一)通过getElement系列方法: document.getElementById();//id document.getElementsByTagName();//标签名:Elements加了S,选出来是类数组: document.get

jQuery学习笔记之DOM树、创建新节点、append方法

DOM树. 创建新节点.创建元素节点和文本节点. 创建元素节点/文本节点/属性节点 节点内部插入元素append方法 节点内部插入元素prepend方法 节点外部插入元素after方法 节点外部插入元素before方法 DOM树 创建div元素节点 创建元素节点和文本节点 创建元素节点.文本节点.属性节点 append方法 prepend方法 after方法 before方法

jQuery向上遍历DOM树之parents(),parent(),closest()之间的区别

http://www.poluoluo.com/jzxy/201312/253059.html 在这个sprint中,因为要写前端UI,所以用到了jQuery,但是jQuery在向上遍历DOM树的API中,有parents(). parent().closest()这几个,一直不太清楚它们具体的区别,所以狠下心好好读了一下jQuery的API文档,并把区别记在这里,以供参考.  1.parents([selector]) 本方法用于选择给定jQuery对象中包含的DOM元素或者DOM元素集的祖先

遍历Dom树

遍历Dom树,可以返回当前页面有那些元素及其数量 (function(){ //遍历Dom树 var doms={ length:0 } function eachDomTree(root){ var childNodes=root.childNodes, len=childNodes.length; for(var i=0;i<len;i++){ var item=childNodes[i]; if(item.nodeType===1){ var tagName=item.nodeName.t

jQuery 遍历:jQuery 遍历 什么是遍历?

jQuery 遍历 什么是遍历? jQuery 遍历,意为"移动",用于根据其相对于其他元素的关系来"查找"(或选取)HTML 元素.以某项选择开始,并沿着这个选择移动,直到抵达您期望的元素为止. 下图展示了一个家族树.通过 jQuery 遍历,您能够从被选(当前的)元素开始,轻松地在家族树中向上移动(祖先),向下移动(子孙),水平移动(同胞).这种移动被称为对 DOM 进行遍历. 图示解析: <div> 元素是 <ul> 的父元素,同时是其

jQuery的属性、遍历和HTML操作

一.属性操作   1..attr()与.removeAttr() 每个元素都有一个或者多个特性,这些特性的用途就是给出相应元素或者其内容的附加信息.如:在img元素中,src就是元素的特性,用来标记图片的地址. 操作特性的DOM方法主要有3个,getAttribute方法. setAttribute方法和removeAttribute方法,就算如此在实际操作中还是会存在很多问题,这里先不说.而在jQuery中用一个 attr()与removeAttr()就可以全部搞定了,包括兼容问题 jQuer

jquery: json树组数据输出到表格Dom树的处理方法

项目背景 项目中需要把表格重排显示 处理方法 思路主要是用历遍Json数组把json数据一个个append到4个表格里,还要给每个单元格绑定个单击弹出自定义对话框,表格分了单双行,第一行最后还要改rowspan呵呵,程序还没优化运行正常先给客户展示先:) 1,表格数据->json数组 var keyArr = new Array(); var jsonArr = new Array(); $list.find("thead th").each(function () { keyA

二叉树 的先序 中序、后序遍历、层次遍历以及树状打印等操作

#include <stdio.h> #include <stdlib.h> #define MAXSIZE 50 typedef struct Node { char data; struct Node *LChild; struct Node *RChild; }BiTNode,*BiTree; typedef struct { BiTree element[MAXSIZE]; int front; int rear; }SeqQueue; /*初始化队列*/ void Ini

CSS优先级问题以及jQuery中的.eq()遍历方法和:eq()选择器的差别

在写一个TAB选项卡的时候遇到几个有意思的问题,记录下来 先把代码贴出来 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="