jquery 遍历子元素 jquery遍历div子元素

转载

mob64ca14116c53 2023-09-25 12:51:28

文章标签 jquery 遍历子元素 jquery 同级元素下的子元素父级元素 css Android 文章分类 jQuery 前端开发

jQuery遍历DOM的父级元素、子级元素和同级元素的方法总结

如下图，显示了HTML中的结构树，通过 JQuery 遍历，您能够从被选(当前的)元素开始，轻松地在家族树中向上移动(祖先)，向下移动(子孙)，水平移动(同胞)。这种移动被称为对 DOM 进行遍历。

遍历 - 父级(祖先)向上遍历DOM数。

通过如下三个方法，我们可以获取父级元素：

parent()

parents()

parentsUntil()

1.JQuery parent()

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

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

文章的标题啦

文章的内容内容内容内容内容内容

结尾部分

$(document).ready(function () {
// 通过parent()函数，可获取当前元素的直接父级元素
var elem = $('span').parent();
console.log(elem);
});

2.JQuery parents()

parents() 方法返回被选元素的所有父元素。

文章的标题啦

文章的内容内容内容内容内容内容

结尾部分

$(document).ready(function () {
// 通过parent()函数，可获取当前元素的所有父级元素
var elem = $('span').parents();
console.log(elem);
});

3.JQuery parentsUntil()

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

文章的标题啦

文章的内容内容内容内容内容内容

结尾部分

$(document).ready(function () {
// 获取span在body标签下的所有父级元素
var elem = $('span').parentsUntil('body');
console.log(elem);
});

遍历 - 子级(后代)向下遍历DOM树。

向下遍历可以使用如下两个函数：

1.children()

2.find()

1.JQuery children()

children() 方法返回被选元素的所有直接子元素。

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

文章的标题啦

文章的内容内容内容内容内容内容

结尾部分

$(document).ready(function () {
// 获取section标签下的所有直接子元素
var elem = $('section').children();
console.log(elem);
});

2.JQuery find()

find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。

文章的标题啦

文章的内容内容内容内容内容内容

结尾部分

$(document).ready(function () {
// 获取section标签下的所有p标签的子元素
var elem = $('section').find('p');
console.log(elem);
// 获取section标签下的所有子元素
var elems = $('section').find('*');
console.log(elems);
});

遍历 - 同级(兄弟)

有以下几个方法：

1.sibings()除自身外，遍历同级的所有元素，修改适用于同级所有元素

2.next()除自身外，仅下一个元素修改

3.nextAll()除自身外，修改下面的所有元素

4.nextUntil()除自身外，对下面的元素进行区间修改

5.prev()修改上一个元素

6.preAll()修改位于元素之上的所有元素

7.preUntil()对位于区间之上的元素进行区间修改

.bd *{
margin:5px;
padding:3px;
border:3px solid black;
}
$(document).ready(function(){
//$("h1").siblings().css({border:"3px solid red"})
//$("h4").nextAll().css({border:"4px solid grey"});
$("h2").prev().css({border:"3px solid green"});
})

;相关阅读:

三种方式获取XMLHttpRequest对象

JavaScript从数组中删除指定值元素的方法

Android字符串和十六进制相互转化出现的中文乱码问题

Win7系统网页无法添加到收藏夹的解决方法

win10右键打开反应慢是怎么办 win10正式版右键反应慢的解决方法

css3选择器基本介绍

android开发基础教程—文件存储功能实现

Android编程实现自动检测版本及自动升级的方法

css中替换元素和不可替换元素及显示元素详细探讨

div+css相对定位和绝对定位用法实例详解

Win10磁盘配额在哪 Win10磁盘配额位置及作用介绍