遍历DOM树，获取所有兄弟节点

最新推荐文章于 2024-03-08 21:31:58 发布

转载最新推荐文章于 2024-03-08 21:31:58 发布 · 459 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/TangGe520/p/9131838.html

文章标签：

#javascript #ViewUI

本文介绍了使用jQuery获取HTML中元素的兄弟节点的各种方法，包括选取所有兄弟节点、下一个兄弟节点、所有后面的兄弟节点等，并提供了具体的示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

获取兄弟节点的常用方法有：

方法	说明
siblings()	选取所有兄弟节点
next()	选取后面兄弟节点
nextAll()	选取所有后面的兄弟节点
nextUntil()	选取所有后面的兄弟节点，但不包含后面指定的节点及指定节点的弟弟……。
prev()	选取前面的兄弟节点
prevAll()	选取所有前面的兄弟节点
prevUntil()	选取所有前面的兄弟节点，但不包含后面指定的节点及指定节点的哥哥……。

获取所有兄弟节点

使用方法siblings()

示例：

         <!DOCTYPE html>
        
         <
         html
         >
        
         <
         head
         >
        
         <
         meta 
         charset
         =
         "UTF-8"
         >
        
         <
         title
         >兄弟节点</
         title
         >
        
         <
         script 
         src
         =
         "https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js"
         ></
         script
         >
        
         <
         style
         >
        
         .box{
        
         border: 1px solid blueviolet;
        
         padding: 1px;
        
         margin-bottom: 12px;
        
         }
        
         </
         style
         >
        
         </
         head
         >
        
         <
         body
         >
        
         <
         div
         >
        
         <
         ul 
         id
         =
         "ul"
         >
        
         <
         li 
         id
         =
         "a"
         >油条</
         li
         >
        
         <
         li 
         id
         =
         "b"
         >包子</
         li
         >
        
         <
         li 
         id
         =
         "c"
         >米饺</
         li
         >
        
         <
         li 
         id
         =
         "d"
         ><
         a
         >鱼粉</
         a
         ></
         li
         >
        
         </
         ul
         >
        
         </
         div
         >
        
         <
         script
         >
        
         $('#c').siblings().attr("class", "box");
        
         </
         script
         >
        
         </
         body
         >
        
         </
         html
         >

获取下个兄弟节点

使用方法next()

示例：

 
         $(
         '#c'
         ).next().attr(
         "class"
         , 
         "box"
         );

获取所有后面的兄弟节点

使用方法nextAll()

示例：

1	`$(` `'#a'` `).nextAll().attr(` `"class"` `,` `"box"` `);`

获取所有前面的兄弟节点

   $(
   '#a'
   ).prevAll().attr(
   "class"
   , 
   "box"
   );
  

   取所有后面的节点，但不包含其中的一个。
  

     $(
     '#c'
     ).nextUntil().attr(
     "class"
     , 
     "box"
     );
    

转载于:https://www.cnblogs.com/TangGe520/p/9131838.html