jQuery对DOM元素的向上、向下、同级遍历和过滤

╰+哭是因爲堅強的太久メ 2021-09-13 23:16 301阅读 0赞

# jQuery的向下遍历 #

**例子：**

**children()方法的元素遍历**

$(document).ready( function (){ 
     $("#div1").children().css({border:"3px solid black"});
    });

**find()方法的元素遍历**

$(document).ready( function (){ 
     $("#div1").find("a").css({border:"3px solid grey"});
    });

**两者区别：**  
一、children参数可有可无，而find必有参数  
二、children只能对元素的儿子元素进行修改，而find则可以对其所有的子元素进行修改。

--------------------

# jQuery的向上遍历 #

**顾名思义，向上遍历就是从子集找到父集。**

.parent()
    $(document).ready( function (){ 
     $("#div2").parent().css({border:"3px solid black"});
     });

div2的父元素div1边框发生了改变

--------------------

.parents()
    $(document).ready( function (){ 
     $("a").parents().css({border:"3px solid grey"});
    });

a元素除外，a元素的所有父级元素都发生了改变

--------------------

.parentUntil()
    $(document).ready( function (){ 
      $("a").parentsUntil("#div1").css({border:"3px solid grey"})
    });

从a元素到div1元素之前的元素边框发生了改变。

--------------------

**三个方法的区别：**

*  .parent()只能向上遍历一层；
 *  .parents()则可以指定父级元素的id进行跨越遍历；
 *  .parentUntil()则具有区间性质，将会遍历包含于区间中的所有元素。

--------------------

# 遍历 - 同级（兄弟） #

同级元素拥有相同的父级元素。在 DOM 树中水平遍历。  
有许多有用的方法让我们在 DOM 树进行水平遍历：  
siblings() 、next() 、nextAll() 、nextUntil() 、prev() 、prevAll() 、prevUntil()

**例子如下：**

<section>
     <h1>文章的<span>标题</span>啦</h1>
     <p>文章的内容内容内容内容内容内容</p>
     <p>结尾部分</p>
    </section>

--------------------

## JQuery siblings() ##

$(document).ready(function () { 
     // 获取h1标签的所有同级元素
     var elem = $('h1').siblings();
     console.log(elem); // p p 
    });

--------------------

## JQuery next() ##

next() 方法返回被选元素的下一个同胞元素

$(document).ready(function () { 
     // 获取h1标签的下一个同级元素
     var elem = $('h1').next();
     console.log(elem); // p
    });

--------------------

## JQuery nextAll() ##

nextAll() 方法返回被选元素的所有跟随的同胞元素。

$(document).ready(function () { 
     // 获取p标签的后面的所有同级元素
     var elem = $('p').nextAll();
     console.log(elem); // p
    });

--------------------

## JQuery nextUntil() ##

nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。

$(document).ready(function () { 
     // 获取
     var elem = $('h1').nextUntil('h2');
     console.log(elem); // p p 
    });

--------------------

## JQuery prev() & prevAll() & prevUntil() ##

prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似，只不过方向相反而已：它们返回的是前面的同级元素（在 DOM 树中沿着同胞元素向后遍历，而不是向前）。

jQuery对DOM元素的向上、向下、同级遍历和过滤

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 jQuery 遍历- 过滤

相关使用jQuery向上遍历

相关 oracle 递归查询，向上和向下遍历

相关 jQuery之元素的遍历和元素的过滤

相关 jQuery遍历——过滤

相关 jQuery——遍历DOM元素的兄弟元素

相关 jQuery——遍历DOM元素的后代元素

相关 jQuery——遍历DOM元素的祖先元素

相关 oracle 递归查询，向上和向下遍历

相关 jQuery对DOM元素的向上、向下、同级遍历和过滤