如何使用jQuery选取有序列表中的第二个和第三个元素

针对给定的HTML结构：

<div class= "image-gallery"> 
 <ol class ="image-control image-flex-control">
  <li> <img src="URL"> </li>
  
  <li> <img src="URL1"> </li>
  
  <li> <img src="URL2"> </li>

 </ol>

</div>

以下是几种可靠的jQuery选取方式，可同时完成添加类和修改图片src的操作：

方法1：明确指定索引（:eq()选择器） #

利用:eq()选择器按索引选取元素（索引从0开始），直接指定第二（索引1）、第三（索引2）个<li>：

// 选取目标元素，添加自定义类并修改图片src
$('.image-control li:eq(1), .image-control li:eq(2)')
  .addClass('target-item') // 替换为你的类名
  .find('img')
  .attr('src', function(index) {
    // 集合内索引0对应第二个li的img，1对应第三个
    return index === 0 ? 'new-second-img-url' : 'new-third-img-url';
  });

方法2：选取索引大于0的元素（:gt()选择器） #

如果需要选取从第二个开始的所有<li>（刚好符合当前3个元素的场景），用:gt(0)（索引大于0）：

$('.image-control li:gt(0)')
  .addClass('target-item')
  .find('img')
  .attr('src', function(i) {
    // i为集合内索引，生成对应新URL
    return `new-img-url-${i+1}`;
  });

方法3：切片选取（slice()方法） #

使用jQuery的slice()方法截取索引范围，slice(1, 3)表示包含索引1、不包含索引3的元素，刚好对应第二、第三个<li>：

$('.image-control li').slice(1, 3)
  .addClass('target-item')
  .find('img')
  .each(function(index) {
    $(this).attr('src', index === 0 ? 'updated-url-2' : 'updated-url-3');
  });

方法4：按子元素位置选取（:nth-child()选择器） #

:nth-child()按元素在父容器中的位置计数（从1开始），直接指定第2、3个元素：

$('.image-control li:nth-child(2), .image-control li:nth-child(3)')
  .addClass('target-item')
  .find('img')
  .attr('src', function(i) {
    return `new-image-${i+2}.jpg`;
  });

选择建议 #

• 若<li>数量固定，用方法1或方法4更精准；
• 若需要批量选取从第二个开始的所有<li>，方法2或slice(1)（不指定结束索引）更高效。

内容的提问来源于stack exchange，提问作者user19298682