javascript - 在 jquery li 中选择连续元素

Question

我想在我的 li 中连续选择元素例如 1 到 5 即前 5 个元素或 2 到 9 中的 2 到 9 个元素所以，基本上我的要求是从被点击的给定元素开始选择 n 个元素。//这是我的 jquery 方法，它帮助我只选择 li 中的 1 个元素

$('.timeslots li').on('click', function() {
  $(this).addClass('selected').siblings().removeClass('selected');
  selectedStartTime = $(this).text();
});

.selected {
  background: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="timeslots">
  <li class="leftarrow"> &nbsp;</li>
  <li> 01: 00</li>
  <li> 01: 30</li>
  <li> 02: 00</li>
  <li> 02: 30</li>
  <li> 03: 00</li>
  <li> 03: 30</li>
  <li> 04: 00</li>
  <li> 04: 30</li>
  <li> 05: 00</li>
  <li> 05: 30</li>
  <li> 06: 00</li>
  <li class="rightarrow">&nbsp;</li>
</ul>

Answer 1

基本上，如果你想从你点击的元素中选择 n 个元素，试试这个:

• 获取实际元素的索引
• 根据该索引和您要选择的元素数量进行选择。

$('.timeslots li').on('click', function() {
  const amountToSelect = 3;
  const listCollection = $('.timeslots li')
  const indexElement = listCollection.index($(this))
  listCollection.removeClass('selected')

  listCollection.slice(indexElement, indexElement+amountToSelect).addClass('selected');
});

.selected {
  background: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="timeslots">
  <li class="leftarrow"> &nbsp;</li>
  <li> 01: 00</li>
  <li> 01: 30</li>
  <li> 02: 00</li>
  <li> 02: 30</li>
  <li> 03: 00</li>
  <li> 03: 30</li>
  <li> 04: 00</li>
  <li> 04: 30</li>
  <li> 05: 00</li>
  <li> 05: 30</li>
  <li> 06: 00</li>
  <li class="rightarrow">&nbsp;</li>
</ul>