JavaScript中忽略column父容器实现select-image元素连续索引问题

问题根源 #

jQuery的index()方法默认返回元素在同级兄弟节点中的位置，你将select-image元素拆分到不同的column-slider父容器后，每个父容器内的第一个select-image的index值都会返回0，这就是点击图9（第二列第一个按钮）跳转到图1的原因。

修复方案 #

有两种简单的修复方式可选，均可实现不受父容器影响的全局索引获取：

方案1：预存索引（稳定性最高） #

在创建select-image元素时直接存储对应的索引值，不受后续父容器拆分的影响，修改两处核心代码即可：

1. 创建分页按钮时绑定索引
   将原来的titles_pagination遍历逻辑修改为：

titles_pagination.each(function(idx) {
  $slider.find('.pagination-slider').append('<div class="select-image" data-index="' + idx + '" alt="go to image" role="tab" tabindex="0"><span>' + $(this).text() + "</span></div>") 
});

2. 点击事件中读取预存的索引
   将点击事件里的索引获取逻辑修改为：

var index = parseInt($(this).data('index'));

方案2：直接查询全局索引（修改量最小） #

不需要修改元素创建逻辑，仅替换点击事件中获取索引的一行代码即可：

// 原代码 var index = $(this).index();
var index = $selectors.index(this);

因为$selectors是提前获取的当前slider下所有select-image元素的集合，index(this)会返回当前点击元素在整个集合中的全局索引，天然不受父容器结构影响。

可选优化点 #

你原有代码中存在部分选择器冗余问题，可以优化避免多滑块场景下的互相干扰：

• 将$slider.find($('.slider-block'))简化为$slider.find('.slider-block')
• 将lenChild = $('.select-image').length修改为lenChild = $slider.find('.select-image').length

内容的提问来源于stack exchange，提问作者Lara M.