Массив из братьев и сестер идет на один индекс меньше - PullRequest
Новая
       24

Массив из братьев и сестер идет на один индекс меньше

0 голосов
/ 30 октября 2019

У меня есть скрипт, который должен читать все элементы HTML одного и того же класса с классом .rect при нажатии на один из них и помещать их в массив, используя 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>

Что могло бы вызвать это?

Редактировать: Я предполагаю, что отрицательный голос объясняется тем, что некоторые люди считают очевидным, что термин "братья и сестры" не будетвключить себя - как в: «У меня есть три родных брата». Но термин также может быть использован как: «Мы все братья и сестры» или «Я один из четырех братьев и сестер». И когда я искал "в javascript есть братья и сестры, включая себя" не было найдено очевидных ответов. Сегодня я узнал.

1 Ответ

1 голос
/ 30 октября 2019

Вместо этого используйте $(".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>
...