使用jQuery siblings()获取元素数组少一个索引的问题排查

嘿，我来帮你把这个问题掰明白！

核心问题根源 #

你遇到的数组长度不符、逻辑偏移的问题，本质是jQuery的$(this).siblings()方法默认不包含元素自身——四个.rect元素里，你点击的那个会被排除在返回结果之外，所以数组长度是3而不是预期的4。

为什么逻辑会偏移？ #

你用$(this).index()拿到的是当前元素在**所有同级元素（包括自身）**中的位置索引：比如第一个红色div的index是0，第二个绿色是1，第三个蓝色是2，最后一个黄色是3。但sort数组里只有另外3个同级元素，索引范围是0到2。

• 点击红色div（index=0）时，sort[0]取到的是绿色div，所以替换后显示的是绿色而非红色；
• 点击黄色div（index=3）时，sort[3]是undefined，自然无法替换内容，也就没任何反应。

你提到的“兄弟姐妹”术语歧义确实存在，但在jQuery的API定义里，siblings()的语义就是「除自身外的同级元素」，这是框架的约定，可能之前没留意到这一点~

两种修正方案 #

方案1：让数组包含当前元素（推荐）

可以用addBack()方法把当前元素重新加入到选择器结果中，这样数组就会包含所有4个.rect元素：

$(".rect").click( function() {
  // 用addBack()把当前元素加入到siblings的结果里
  var sort = Array.from( $(this).siblings().addBack() );
  var current_index = $(this).index();
  document.getElementById("target").innerHTML = sort[current_index].outerHTML;
});

或者直接获取父元素下的所有.rect子元素，效果是一样的：

$(".rect").click( function() {
  var sort = Array.from( $(this).parent().children(".rect") );
  var current_index = $(this).index();
  document.getElementById("target").innerHTML = sort[current_index].outerHTML;
});

方案2：调整索引对应关系

如果你不想修改数组内容，可以根据index()的值调整取数组的索引，但这种方法不如第一种直观：

$(".rect").click( function() {
  var sort = Array.from( $(this).siblings() );
  var current_index = $(this).index();
  var targetElement;
  if (current_index < sort.length) {
    targetElement = sort[current_index];
  } else {
    targetElement = this; // 点击最后一个时，直接用当前元素
  }
  document.getElementById("target").innerHTML = targetElement.outerHTML;
});

验证效果 #

用方案1修改后，点击任意.rect元素，都会准确保留被点击的那个div，点击最后一个黄色div也能正常显示了。

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