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

Question

我想在我的 li eg1 到 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>

标签： javascriptjquery

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>