来自兄弟姐妹的数组出现了一个索引短

Question

我有一个脚本，当单击其中一个时，它应该读取所有带有 class .rect 的兄弟 HTML 元素，并使用 Array.from($(this).siblings())...然后用那个数组做点什么。

问题是，数组长度是3而不是4，导致所有的东西都减一，我不明白为什么。

在下面的代码中，当单击其中一个彩色 div 时，应该仅将 div 集合替换为被单击的那个。相反，它被它的下一个兄弟取代。如果单击最后一个（黄色），则什么也没有发生 - 可能是因为数组中缺少最后一个索引。

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
.rect {width:24px; height:12px; border-radius:12px; border:4px solid rgba(0,0,0,0.25); margin-bottom:12px}
.red {background-color:#c21}
.green {background-color:#1c3}
.blue {background-color:#28f}
.yellow {background-color:#ed1}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
</head>
<body>
<div id="target">
 <div class="rect red"></div>
 <div class="rect green"></div>
 <div class="rect blue"></div>
 <div class="rect yellow"></div>
</div>
<script>
$(".rect").click( function() {
 var sort = Array.from( $(this).siblings() );
 var current_index = $(this).index();
 document.getElementById("target").innerHTML = sort[current_index].outerHTML;
});
</script>
</body>
</html>

什么会导致这种情况？

编辑：我猜反对票是因为有些人认为 "siblings" 一词显然不包括自己 - 如："I have three siblings"。但该术语也可以像这样使用："We are all siblings" 或 "I am one of four siblings"。当我搜索 "javascript does siblings include self" 时，没有明显的答案浮出水面。今天学习了

Answer 1

改用$(".rect")或$(this).parent().children()，因为.sibilings()不会有当前元素，你也不需要Array.from:

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <style>
    .rect {width:24px; height:12px; border-radius:12px; border:4px solid rgba(0,0,0,0.25); margin-bottom:12px}
    .red {background-color:#c21}
    .green {background-color:#1c3}
    .blue {background-color:#28f}
    .yellow {background-color:#ed1}
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
</head>

<body>
  <div id="target">
    <div class="rect red"></div>
    <div class="rect green"></div>
    <div class="rect blue"></div>
    <div class="rect yellow"></div>
  </div>
  <script>
    $(".rect").click(function() {
      var sort = $(this).parent().children(); //$(".rect");
      var current_index = $(this).index();
      document.getElementById("target").innerHTML = sort[current_index].outerHTML;
    });
  </script>
</body>

</html>

来自兄弟姐妹的数组出现了一个索引短

Array from siblings comes up one index short

javascript

arrays

jquery

siblings