如何使用 jQuery 选择一系列元素？

给定一个包含一系列相似元素的 HTML 文档，任务是在 JavaScript 的帮助下选择这些元素的范围。下面将通过示例讨论两种方法。

方法一：首先通过jQuery选择器选择class = ‘child’的所有元素，然后使用slice()方法连续选择一个范围内的元素。元素的背景颜色已更改以查看效果。

• 例子：

    
  
      
          How to select a range of elements in JQuery
      
      
      
      
          h1 {
              color: green;
          }
            
          .geeks {
              color: green;
              font-size: 24px;
              font-weight: bold;
          }
      
  
    
  
      
           
            GeeksforGeeks 
          
           
            Click on button to select a range
            of elements
          
          
              
                Child 1
              
                Child 2
              
                Child 3
              
                Child 4
          
          
          
              click here
          
          
          
      
      
          var down = document.getElementById('geeks');
            
          // Defining childs 
          var arr = [0, 2, 3];
    
          function gfg() {
              var $el = $(".outer .child");
              for (var i = 0; i < arr.length; i++) {
                  $el.slice(arr[i], arr[i] + 1)
                  .css("color", "red");
              }
              down.innerHTML = "Range of elements selected";
          }
      
  
    

• 输出：

方法二：首先通过jQuery选择器选择class = ‘child’的所有元素。有一个数组，其中包含要选择的元素的索引。我们正在遍历数组并使用slice() 方法来选择该索引的特定元素。元素的背景颜色已更改以查看效果。

• 例子：

    
  
      
          How to select a range of elements in JQuery
      
      
      
      
          h1 {
              color: green;
          }
            
          .geeks {
              color: green;
              font-size: 24px;
              font-weight: bold;
          }
            
      
  
    
  
      
           
            GeeksforGeeks 
          
           
            Click on button to select a range
            of elements
          
          
              
                Child 1
              
                Child 2
              
                Child 3
              
                Child 4
          
          
          
              click here
          
          
          
      
      
          var down = document.getElementById('geeks');
            
          // Defining childs 
          var arr = [0, 2, 3];
    
          function gfg() {
              var $el = $(".outer .child");
              for(var i=0; i<arr.length; i++) {
                 $el.slice(arr[i], arr[i]+1)
                 .css("color", "red");
              }
              down.innerHTML = "Range of elements selected";
          }
      
  
    

• 输出：