如何使用 jQuery 按字母顺序对列表进行排序？

给定一个元素列表，任务是按字母顺序对它们进行排序，并在 jQuery 的帮助下将每个元素放入列表中。

• jQuery text() 方法：此方法设置/返回所选元素的文本内容。如果此方法用于返回内容，则提供所有匹配元素的文本内容（将删除 HTML 标签）。如果使用此方法设置内容，则替换所有匹配元素的内容。

  句法：

  • 返回文本内容：

    $(selector).text()

  • 设置文本内容：

    $(selector).text(content)

  • 使用函数设置文本内容：

    $(selector).text(function(index, curContent))

  参数：

  • content：必填参数。它指定所选元素的新文本内容。
  • 函数(index, curContent)：可选参数。它指定了一个函数，该函数返回所选元素的新文本内容。
    • index：返回集合中元素的索引位置。
    • curContent：返回所选元素的当前内容。
• JavaScript String toUpperCase() 方法：此方法将字符串转换为大写字母。

  句法：

  string.toUpperCase()

  返回值：它返回一个字符串，表示转换为大写的字符串的值。

• jQuery appendTo() 方法：此方法在所选元素的末尾添加 HTML 元素。

  句法：

  $(content).appendTo(selector)

  参数：

  • content：必填参数。它指定要插入的内容（必须包含 HTML 标记）。
  • 选择器：必填参数。它指定在哪些元素上附加内容。

示例 1：在此示例中，首先选择列表元素，然后将其传递给函数进行排序。排序后，它们使用appendTo() 方法以排序方式附加到父元素。

 
 
     
         
            Sort a list alphabetically
        
          
        
        
     
      
     
         
            GeeksForGeeks 
        
          
        
            click on the button to sort the list
        
          
        
            Geeks
            For
            GFG
            GeeksForGeeks
        
        
          
        
            
                click here
            
        
          
        
        
          
        
            function Ascending_sort(a, b) {
                return ($(b).text().toUpperCase()) < 
                    ($(a).text().toUpperCase()) ? 1 : -1; 
            }
            $('button').on('click', function() {
                $("ul li").sort(Ascending_sort).appendTo('ul');
                $("#GFG_DOWN").text("sorted");
            });                 
         
     
                    

输出：

• 在点击按钮之前：
  
• 点击按钮后：
  

示例 2：在此示例中，首先选择列表元素，然后将其传递给函数进行排序。排序后，它们使用appendTo() 方法以排序方式附加到父元素。此示例使用与第一个示例相同的方法，但方法不同。

 
 
     
         
            Sort a list alphabetically
        
          
        
        
     
      
     
         
            GeeksForGeeks 
        
          
        
            click on the button to sort the list
        
          
        
            a
            c
            b
            B
        
        
          
        
            
                click here
            
        
          
        
        
          
        
            function sort(selector) {
                $(selector).children("li").sort(function(a, b) {
                    var A = $(a).text().toUpperCase();
                    var B = $(b).text().toUpperCase();
                    return (A < B) ? -1 : (A > B) ? 1 : 0;
                }).appendTo(selector);
            }
              
            $('button').on('click', function() {
                sort("ul.mylist");
                $("#GFG_DOWN").text("sorted");
            });                 
         
     
                    

输出：

• 在点击按钮之前：
  
• 点击按钮后：