jQuery遍历是什么意思？

jQuery 遍历意味着遍历HTML页面中的链接元素。使用 jQuery 遍历，我们可以根据元素的关系来搜索和查找不同的元素。元素可以是父母、兄弟姐妹、孩子等。

我们可以向上移动（祖先）、向下移动（后代）和侧向移动（兄弟姐妹）。我们可以在下图中看到一个 DOM。它只是为了演示 DOM 是如何工作的，并不完美。从 DOM 中的任何元素开始，我们可以到达 DOM 中的任何元素，因为每个元素都是 HTML 的后代，HTML 是遍历的一部分。

DOM

从上图可以得出以下几点。

• 是根元素。
• 、

  和

  是 元素的子元素。
• 是

  的子元素，而

  又是三个

  元素的父元素。

  元素，

  的兄弟元素是

  和两个

  的祖先。

  是 的继承者，它是

  和 的祖先。

向上遍历：向上遍历 DOM 意味着向父母或祖先移动。 jQuery中使用以下三种方法进行向上遍历。

• jQuery parent() 方法
• jQuery parents() 方法
• jQuery parentsUntil() 方法

jQuery parent() 方法：此方法用于获取我们正在搜索的元素的最近父级。下面是一个例子，我们正在寻找

的父级

。我们使用 CSS parent()函数来获取直接父级。
是两个
• 元素的直接父级。

  HTML

    
  
      
      
      GeeksforGeeks
      
      
  
    
  
      GeeksforGeeks
      
          Welcome to GeeksforGeeks
          
              Data Structures
              Algorithms
          
      
      
          $("li").parent().css({
              "color": "green",
              "margin": "2rem",
              "border": "2px solid green"
          })
      

  
  
  
  
  
  
  
  
  
  
  
  
  

  输出：

  

  jQuery parents() 方法：此方法用于将所有祖先获取到文档的根目录，即 。在下面的示例中，我们有一个嵌套的元素树，我们将为具有“lastchild” id 的

• 项的所有祖先应用样式。

  HTML

    
  
      
      
      GeeksforGeeks
      
      
  
    
  
      GeeksforGeeks
      
          Welcome to GeeksforGeeks
          
              
                  Data Structures
                  
                      Array
                      Struct
                      Queue
                      Linked List
                  
              
              
                  Algorithms
                  
                      Searching
                      Sorting
                      Backtracking
                  
              
          
      
      
          $('#lastchild').parents().css({
              "margin": ".2rem",
              "border": "2px solid green"
          })
      

  输出：

  

  jQuery parentsUntil() 方法： jQuery 的此方法用于获取仅达到声明元素的父级。下面的示例有一个包含项目列表的 HTML div。我们希望样式从

• 项的“lastchild” id 开始，直到第一个 id 为“finalparent”的
  。

  所以边框和边距应该应用于两个元素。首先是

  的直接父级，然后是
  • 。

    HTML

      
    
        
        
        GeeksforGeeks
        
        
    
      
    
        GeeksforGeeks
        
            Welcome to GeeksforGeeks
            
                
                    Data Structures
                    
                        Array
                        Struct
                        Queue
                        Linked List
                    
                
                
                    Algorithms
                    
                        Searching
                        Sorting
                        Backtracking
                    
                
            
        
        
            $('#lastchild').parentsUntil("#finalparent").css({
                "margin": ".2rem",
                "border": "2px solid green"
             })
        

    输出：

    

    向下遍历：向下遍历意味着我们想要到达祖先元素的后代。后代可以是直接子代或嵌套子代。我们可以使用以下两个函数在 jQuery 中找到不同的后代。

    • jQuery children() 方法
    • jQuery find() 方法

    jQuery children() 方法：使用这个 jQuery函数，我们可以访问元素的所有直接子元素。直接子元素是指元素内部的元素，而不是进一步嵌套的元素。

    以下是

    元素具有三个

    段落的示例。结果将所有段落都带有绿色边框。

    HTML

      
    
        
        
        GeeksforGeeks
        
        
    
      
    
        GeeksforGeeks
        
            GeeksforGeeks is a coding and development tutorial website.
            We can also find tutorials for Machine Learning and IOT.
            Almost all of the resources on GeeksforGeeks is for free.
      
        
        
            $('div').children().css({
                "margin": "1rem",
                "border": "2px dotted green"
            })
        

    输出：

    

    jQuery find() 方法：在这个函数中。我们传递元素的直接或间接子元素的名称、id 或类名。在这个例子中，我们想要找到 id 为“lastchild”的

  • 项，它是
    的间接后代。

    HTML

      
    
        
        
        GeeksforGeeks
        
        
    
      
    
        GeeksforGeeks
        
            
                GeeksforGeeks is a coding and 
                development tutorial website.
            
            
                We can also find tutorials for 
                Machine Learning and IOT.
            
            
                Almost all of the resources on 
                GeeksforGeeks is for free.
            
      
            
                Algorithms
                Data Structures
                Machine Learning
            
        
        
            $('div').find("#lastchild").css({
                "padding": ".5rem",
                "margin": "1rem",
                "border": "5px solid green"
            })
        
    
      

    输出：

    

    遍历兄弟姐妹：兄弟姐妹可以与兄弟姐妹相关。假设无序列表的列表项都是兄弟。我们可以使用以下函数来查找 jQuery 中的兄弟姐妹。

    • jQuery 兄弟姐妹() 方法
    • jQuery next() 方法
    • jQuery nextAll() 方法
    • jQuery nextUntil() 方法
    • jQuery prev() 方法
    • jQuery prevAll() 方法
    • jQuery prevUntil() 方法

    jQuery 兄弟（）方法：该方法用于查找除了元素本身之外它在顶部或下方的所有横向元素。此方法查找

    标记的所有兄弟元素，并应用 CSS 来识别元素。

    HTML

      
    
        
        
        GeeksforGeeks
        
        
    
      
    
        GeeksforGeeks
        
            Welcome to GeeksforGeeks
            
                GeeksforGeeks is a coding and 
                development tutorial website.
            
            
                We can also find tutorials for 
                Machine Learning and IOT.
            
      
            
                Algorithms
                Data Structures
                Machine Learning
            
        
      
        
            $('h3').siblings().css({
                "margin": "1rem",
                "border": "5px solid green"
            })
        

    输出：

    

    jQuery next() 方法：此方法用于查找下一个兄弟元素。在下面的示例中，我们将查找

    旁边的元素，即第一个

    元素。

    HTML

      
    
        
        
        GeeksforGeeks
        
        
    
      
    
        GeeksforGeeks
        
            Welcome to GeeksforGeeks
            
                GeeksforGeeks is a coding and 
                development tutorial website.
            
      
            
                We can also find tutorials for 
                Machine Learning and IOT.
            
      
            
                Algorithms
                Data Structures
                Machine Learning
            
        
        
            $('h3').next().css({
                "margin": "1rem",
                "border": "5px solid green"
            })
        

    输出：

    

    jQuery nextAll() 方法：此方法与next()方法非常相似，但它会查找我们要查找的元素旁边的所有元素。在下面的示例中，我们要查找具有 id 的

    元素旁边的元素。

    HTML

      
    
        
        
        GeeksforGeeks
        
        
    
      
    
        GeeksforGeeks
        
            Welcome to GeeksforGeeks
            GeeksforGeeks is a coding and development tutorial website.
            
                We can also find tutorials for Machine Learning and IOT.
            
      
            
                Algorithms
                Data Structures
                Machine Learning
            
        
        
            $('#paragraph').nextAll().css({"margin": "1rem",
                                           "border": "5px solid green"})
        
    
      

    输出：

    

    jQuery nextUntil() 方法：此方法用于查找兄弟元素，直到指定元素或将其传递给此函数。在这个例子中，我们从第一个

    元素开始，我们将移动到

    。

    HTML

      
    
        
        
        GeeksforGeeks
        
        
    
      
    
        GeeksforGeeks
        
            Welcome to GeeksforGeeks
            
              GeeksforGeeks is a coding and 
              development tutorial website.
            
      
            We can also find tutorials for Machine Learning and IOT.
      
            
                Algorithms
                Data Structures
                Machine Learning
            
        
        
            $('#paragraph').nextUntil("ul").css({"margin": "1rem",
                                                 "border": "5px solid green"})
        
    
      

    输出：

    

    jQuery prev() 方法： prev()函数查找当前元素之前或之上的元素。这两个元素都是兄弟姐妹。它找到它的前一个元素。所以我们在下面的例子中使用了这个函数来查找具有 id 的

    元素的前一个元素。

    HTML

      
    
        
        
        GeeksforGeeks
        
        
    
      
    
        GeeksforGeeks
        
            Welcome to GeeksforGeeks
            
                GeeksforGeeks is a coding and 
                development tutorial website.
            
      
            
                We can also find tutorials for 
                Machine Learning and IOT.
            
      
            
                Algorithms
                Data Structures
                Machine Learning
            
        
        
            $('#paragraph').prev().css({"margin": "1rem",
                                        "border": "5px solid green"})
        
    
      

    输出：

    

    jQuery prevAll() 方法：此函数用于查找所有同级元素和当前元素之前的所有元素。此方法类似于 nextAll()函数。在下面的示例中，我们将查找

    元素之前的元素。

    HTML

      
    
        
        
        GeeksforGeeks
        
        
    
      
    
        GeeksforGeeks
        
            Welcome to GeeksforGeeks
            
                GeeksforGeeks is a coding and 
                development tutorial website.
            
            
                We can also find tutorials for 
                Machine Learning and IOT.
            
      
            
                Algorithms
                Data Structures
                Machine Learning
            
        
        
            $('ul').prevAll().css({"margin": "1rem",
                                   "border": "5px solid green"})
        
    
      

    
    

    jQuery prevUntil() 方法： 此函数查找当前元素之前的所有元素，直到指定元素。在下面的示例中，我们要查找

    的所有先前元素，直到

    元素。

    将不包括在内。

    HTML

      
    
        
        
        GeeksforGeeks
        
        
    
      
    
        GeeksforGeeks
        
            Welcome to GeeksforGeeks
            
                GeeksforGeeks is a coding and 
                development tutorial website.
            
            
                We can also find tutorials for 
                Machine Learning and IOT.
            
      
            
                Algorithms
                Data Structures
                Machine Learning
            
        
        
            $('ul').prevUntil('h3').css({"margin": "1rem",
                                         "border": "5px solid green"})
        
    
      

    输出：