如何使用 jQuery 遍历 div 的子元素？

jQuery Selector 可用于从 DOM 中查找(选择)HTML 元素。一旦选择了一个元素，就会调用 jQuery children() 方法来查找所选元素的所有子元素。要循环遍历子元素，请使用 jQuery each() 方法，如下例所示。

示例 1：示例 HTML 页面包含一个具有一些子元素的“容器”div。循环在“容器”div 的所有子元素中完成，然后将它们复制到最初没有子元素的“输出容器”div。

  

    
    
    

  

    
        GeeksforGeeks
    
    
  
    This is the "#container" div
  
    
        
            Child
            
                Grandchild
            
        
    
  
    This is the "#output-container" div
    
  
    
        // loop through the child elements
        // of the "#container" div
        $("#container").children()
                .each(function () {
  
            // "this" is the current child
            // in the loop grabbing this 
            // element in the form of string
            // and appending it to the 
            // "#output-container" div
            var element = $(this)
                    .prop('outerHTML');
  
            $("#output-container")
                    .append(element);
        });
    

  

输出：

示例2：在上面的示例中，循环是通过所有子元素实现的。但是，如果需要循环某些特定的子元素或具有特定类或 id 的元素，则将其作为参数传递给children()函数，如下所示。

  

    
    
    

  

    
        GeeksforGeeks
    
    
  
    This is the "#container" div
  
    
        Lorem Ipsum
        
            Lorem Ipsum
        
  
        Lorem Ipsum
    
    
  
    Selecting the 'em' element
    
  
    
        Selecting the element 
        with id "name"
    
    
  
    
        Selecting the element 
        with class "uname"
    
    
  
    
  
        // looping over the child 'em' 
        // elements of the "#container" div
        $("#container").children('em').each(function()
        {
            var element = $(this).prop('outerHTML');
            $("#em-container").append(element);
        });
  
        // looping over the child elements of
        // the "#container" div having id as "name"
        $("#container").children('#name').each(function()
        {
            var element = $(this).prop('outerHTML');
            $("#name-container").append(element);
        });
  
        // looping over the child elements of
        // the "#container" div having class as "uname"
        $("#container").children('.uname').each(function()
        {
            var element = $(this).prop('outerHTML');
            $("#uname-container").append(element);
        });
    

  

输出：

上面的例子演示了所有三种情况，循环特定的子元素，循环具有特定 id 的子元素，以及循环具有特定类的子元素。