jQuery向父辈遍历的简单方法

2024-04-10 10:57:53

通过DOM树可以可容易的访问到html文档中的所有元素

例如向上访问父辈的元素有以下方法

1.parent()方法可以得到所定元素的直接父元素

$("span").parent();得到<span>元素的直接父元素

2.parents()方法得到给定元素的所有父元素

$("span").parents();得到<span>元素的所有父元素

$("span").panents(".text");得到<span>元素的父元素中class="text"的元素

3.parentsUntil()方法得到两个给定元素之间的元素

$("span").parentsUntil(".text");得到<span>元素与class="text"元素之间的所有元素

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
 <style>
 .container
 {
  float:left;
  margin-left:30px;
 }
.container div
 {
  border:1px solid grey;
  margin:15px auto;
 }
.ancestor1-1,.ancestor2-1,.ancestor3-1,.ancestor4-1
{
  width:150px;
  height:150px;
}
.ancestor1-2,.ancestor2-2,.ancestor3-2,.ancestor4-2
{
  width:120px;
  height:120px;
}
.ancestor1-3,.ancestor2-3,.ancestor3-3,.ancestor4-3
{
  width:90px;
  height:90px;
}
.now1,.now2,.now3,.now4
{
  width:60px;
  height:60px;
}
 </style>
 <script>
$(document).ready(function(){
$(".now1").parent().css("border-color","red");
$(".now2").parents().css("border-color","red");
$(".now3").parents(".ancestor3-2").css("border-color","red");
$(".now4").parentsUntil(".ancestor4-1").css("border-color","red");
}
);
 </script>
</head>
<body>
<div>
  <div class="container">
    <div class="ancestor1-1"><div class="ancestor1-2"><div class="ancestor1-3"><div class="now1">给定元素</div></div></div></div>
  </div>
  <div class="container">
    <div class="ancestor2-1"><div class="ancestor2-2"><div class="ancestor2-3"><div class="now2">给定元素</div></div></div></div>
  </div>
  <div class="container">
    <div class="ancestor3-1"><div class="ancestor3-2"><div class="ancestor3-3"><div class="now3">给定元素</div></div></div></div>
  </div>
  <div class="container">
    <div class="ancestor4-1"><div class="ancestor4-2"><div class="ancestor4-3"><div class="now4">给定元素</div></div></div></div>
  </div>
</div>
</body>
</html>

效果图：

以上这篇jQuery向父辈遍历的简单方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

JQuery遍历DOM节点的方法

本文实例讲述了JQuery遍历DOM节点的方法.分享给大家供大家参考.具体分析如下: 本节的核心是介绍JQuery的DOM操作,前面介绍了很多创建.删除.替换等等节点操作.这里介绍如何遍历节点,选中临近节点等的一些方法. children()方法该方法用于取得匹配元素的子元素集合.根据DOM树的结构,可以知道各个元素之间的关系以及它们子节点的个数. 下面使用children()方法来获取匹配元素的所有子元素的个数. var $body = $("body").children();
jQuery循环遍历子节点并获取值的方法

本文实例讲述了jQuery循环遍历子节点并获取值的方法.分享给大家供大家参考,具体如下: Html代码部分: <div class="left_tree_ad_btn_container"> <ul> <li class="tree_ad_btn_bg"><img src="/images/insurance/3lianad_small.jpg" /> </li> </ul>
jQuery 遍历函数详解

jQuery 遍历函数包括了用于筛选.查找和串联元素的方法. 函数描述 .add() 将元素添加到匹配元素的集合中. .andSelf() 把堆栈中之前的元素集添加到当前集合中. .children() 获得匹配元素集合中每个元素的所有子元素. .closest() 从元素本身开始,逐级向上级元素匹配,并返回最先匹配的祖先元素. .contents() 获得匹配元素集合中每个元素的子元素,包括文本和注释节点. .each() 对 jQuery 对象进行迭代,为每个匹配元素执行函数. .end(
jQuery向父辈遍历的简单方法

通过DOM树可以可容易的访问到html文档中的所有元素例如向上访问父辈的元素有以下方法 1.parent()方法可以得到所定元素的直接父元素 $("span").parent();得到<span>元素的直接父元素 2.parents()方法得到给定元素的所有父元素 $("span").parents();得到<span>元素的所有父元素 $("span").panents(".text");得到<
Jquery删除css属性的简单方法

有时我们不需要某个css属性时,想删除它,但有没有removeCss方法,怎么办呢? 可以使用如下方法解决 $('选择器').css('css属性',''); 即将css属性值赋值为空,页面中就不会显示该css属性了. 如:$('.div1').css('opacity',''); 以上这篇Jquery删除css属性的简单方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.
使用JQuery选择HTML遍历函数的方法

使用JQuery,可以很容易的选择THML元素.但在有些时候,HTML结构比较复杂的时候,提炼我们选择的元素就是一件比较麻烦的事情. 1.children 这个函数得到一组元素的直接子级. 给children()传递一个选择表达式将选择结果缩小至选中的元素; 如果chilidren()每接受任何参数,将返回所有直接子级;不返回它的孙级元素. 2.filter 这个函数通过传递的选择表达式从一个集合中过滤元素.任何不匹配这个表达式的元素将从选择的集合中移除. 3.not 与filter恰恰相反,n
jQuery使用each遍历循环的方法

1.选择器+遍历 $('div').each(function (i){ i就是索引值 this 表示获取遍历每一个dom对象 }); 2.选择器+遍历 $('div').each(function (index,domEle){ index就是索引值 domEle 表示获取遍历每一个dom对象 }); 3.更适用的遍历方法 1)先获取某个集合对象 2)遍历集合对象的每一个元素 var d=$("div"); $.each(d,function (index,domEle){ d是要遍
jQuery使用$.each遍历json数组的简单实现方法

本文实例讲述了jQuery使用$.each遍历json数组的简单实现方法.分享给大家供大家参考,具体如下: <!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&quo
JQuery遍历元素的父辈和祖先的方法

JQuery遍历首先我们要知道什么是父亲,儿子,后代,同胞,祖先 •<div> 元素是 <ul> 的父元素,同时是其中所有内容的祖先. •<ul> 元素是 <li> 元素的父元素,同时是 <div> 的子元素 •左边的 <li> 元素是 <span> 的父元素,<ul> 的子元素,同时是 <div> 的后代. •<span> 元素是 <li> 的子元素,同时是 <
jQuery简单实现遍历数组的方法

本文实例讲述了jQuery简单实现遍历数组的方法.分享给大家供大家参考.具体如下: var members=["1","2","3"]; //index为数组的下标 //value为数组下标对应的值 $.each(members,function(index,value){ alert(value); }); 希望本文所述对大家的jQuery程序设计有所帮助.
利用jQuery对无序列表排序的简单方法

利用jQuery对无序列表排序的原理是:获取到无序列表中的所有列表项,并转成数组形式,使用JavaScript函数对其进行排序后再次输出.其中使用到的jQuery函数有ready().get().text().each().append()和JavaScript函数sort(). 1．jQuery函数介绍 (1)jQuery函数get()--获取匹配元素集合该函数取得所有匹配元素的一种向后兼容的方式(不同于jQuery对象,实际上是元素数组).其语法形式如下: object.get() 注:如
python 循环遍历字典元素的简单方法

一个简单的for语句就能循环字典的所有键,就像处理序列一样: In [1]: d = {'x':1, 'y':2, 'z':3} In [2]: for key in d: ...: print key, 'corresponds to', d[key] ...: y corresponds to 2 x corresponds to 1 z corresponds to 3 在python2.2之前,还只能用beys等字典方法来获取键(因为不允许直接迭代字典).如果只需要值,可以使用d.val
java遍历HashMap简单的方法

本文实例讲述了java遍历HashMap简单的方法.分享给大家供大家参考.具体实现方法如下: import java.util.HashMap; import java.util.Iterator; import java.util.Set; public class HashSetTest { public static void main(String[] args) { HashMap map = new HashMap(); map.put("a", "aa"

jQuery向父辈遍历的简单方法

相关推荐

随机推荐