通过Div ID获取指定类名下一个元素的Jquery问题

问题背景 #

• 需求：通过Div ID获取页面内任意位置的指定类名.select_track的下一个div元素。页面包含两个区块，元素ID规则分别为track_'.$row->id.'和geotrack_'.$row->id.'，所有目标元素均使用.select_track类。
• 当前代码逻辑：
  1. 点击播放触发元素.hoveredPlayTriger时，通过closest('.select_track').index()记录当前元素的索引到keepIndex变量。
  2. 点击下一曲按钮#fplayer_next时，将keepIndex+1作为下一个元素的索引，获取对应.select_track的ID并触发播放。
• 异常表现：第一区块内切换正常，也能从第一区块最后一个元素跳到第二区块第一个元素，但再次点击下一曲时，索引回到0，会选中第一区块的第二个元素而非第二区块的第二个。

问题根源 #

问题出在index()方法的默认行为：$(element).index()返回的是该元素在同级兄弟元素中的位置，而非整个页面所有.select_track元素的全局索引。当从第一区块跳转到第二区块第一个元素时，这个元素在自身区块的同级兄弟中只有自己，所以index()返回0，导致再次点击下一曲时nextIndex变为1，选中全局.select_track集合中的第二个元素（即第一区块的第二个元素）。

修复方案 #

1. 修改播放触发时的索引记录逻辑 #

不再使用局部同级索引，直接获取当前元素在全局.select_track集合中的位置：

let keepIndex = null;

// .hoveredPlayTriger class is child of .select_track
$(document).on('click', '.hoveredPlayTriger', function(e) {
    // some codes here

    // 获取当前元素在全局所有.select_track中的索引
    const currentTrack = $(this).closest('.select_track');
    keepIndex = $('.select_track').index(currentTrack);

    console.log('Current index:'+keepIndex);
    
   // some other codes here
});

2. 优化下一曲按钮的逻辑 #

保留核心逻辑，增加边界处理（可选循环播放），并更新keepIndex为新索引：

// #fplayer_next is player next track button
$(document).on('click', '#fplayer_next', function(e){
    e.preventDefault();
    
    const allTracks = $('.select_track');
    // 计算下一个索引，超出总数则回到0（实现循环播放，可根据需求调整）
    let nextIndex = (keepIndex + 1) % allTracks.length;
    
    const nextTrack = allTracks.eq(nextIndex);
    const nextId = nextTrack.attr('id');

    console.log('next index:'+nextIndex+'    and ID: '+nextId);
    
    // 更新索引，确保后续点击逻辑正确
    keepIndex = nextIndex;
    $('#'+nextId+' .hoveredPlayTriger').click();
});

关键修改说明 #

• 使用$('.select_track').index(currentTrack)直接获取全局索引，不受元素所在区块的影响。
• 下一曲逻辑中通过取模运算处理边界情况，实现循环播放（若不需要循环，可改为判断nextIndex是否超过集合长度，超出则停止）。
• 每次触发下一曲后更新keepIndex，保证后续索引计算的连续性。

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