时间戳

首页 > 解决方案 > 如何在jQuery中选择范围之间的元素

javascript - 如何在jQuery中选择范围之间的元素

问题描述

你能看看这个演示，让我知道如何.d-none从位于两个给定数字之间的元素中删除类吗？敌人示例我只想显示.box介于 1 到 6 之间并隐藏所有其他框

$("button").on("click", function(e) {
  var id = $(this).attr('id');

  if (id == 1) {
    $('.box').addClass('d-none');
    // Now only display boxes from  1 to 6
  }
  if (id == 2) {
    $('.box').addClass('d-none');
    // Now only display boxes from  10 to 26
  }
  if (id == 3) {
    $('.box').addClass('d-none');
    // Now only display boxes from  12 to 36
  }
});
.box {
  background: gold;
  height: 60px;
  width: 60px;
  color: black;
  text-align: center;
  line-height: 50px;
  float: left;
  margin: 2px;
}

.d-none {
  display: none !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="1">1 - 6</button>
<button id="2">10 - 26</button>
<button id="3">12 - 36</button>
<br />
<div class="box">0</div>
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box">8</div>
<div class="box">9</div>
<div class="box">10</div>
<div class="box">11</div>
<div class="box">12</div>
<div class="box">13</div>
<div class="box">14</div>
<div class="box">15</div>
<div class="box">16</div>
<div class="box">17</div>
<div class="box">18</div>
<div class="box">19</div>
<div class="box">20</div>
<div class="box">21</div>
<div class="box">22</div>
<div class="box">23</div>
<div class="box">24</div>
<div class="box">25</div>
<div class="box">26</div>
<div class="box">27</div>
<div class="box">28</div>
<div class="box">29</div>
<div class="box">30</div>
<div class="box">31</div>
<div class="box">32</div>
<div class="box">33</div>
<div class="box">34</div>
<div class="box">35</div>
<div class="box">36</div>
<div class="box">37</div>
<div class="box">38</div>
<div class="box">39</div>
<div class="box">40</div>

标签： javascriptjquery

解决方案

You can do it easily using jquery slice() method. The slice() method helps us to reduce the set of matched elements to a subset specified by a range of indices, which is exactly we need here.

$("button").on("click", function(e) {
  var id = $(this).attr('id');
  $('.box').addClass('d-none');
  if (id == 1) {
    $('.box').slice(1,7).removeClass('d-none');
    // Now only display boxes from  1 to 6
  }
  if (id == 2) {
    $('.box').slice(10,27).removeClass('d-none');
    // Now only display boxes from  10 to 26
  }
  if (id == 3) {
    $('.box').slice(12,37).removeClass('d-none');
    // Now only display boxes from  12 to 36
  }
});
.box {
  background: gold;
  height: 60px;
  width: 60px;
  color: black;
  text-align: center;
  line-height: 50px;
  float: left;
  margin: 2px;
}

.d-none {
  display: none !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="1">1 - 6</button>
<button id="2">10 - 26</button>
<button id="3">12 - 36</button>
<br />
<div class="box">0</div>
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box">8</div>
<div class="box">9</div>
<div class="box">10</div>
<div class="box">11</div>
<div class="box">12</div>
<div class="box">13</div>
<div class="box">14</div>
<div class="box">15</div>
<div class="box">16</div>
<div class="box">17</div>
<div class="box">18</div>
<div class="box">19</div>
<div class="box">20</div>
<div class="box">21</div>
<div class="box">22</div>
<div class="box">23</div>
<div class="box">24</div>
<div class="box">25</div>
<div class="box">26</div>
<div class="box">27</div>
<div class="box">28</div>
<div class="box">29</div>
<div class="box">30</div>
<div class="box">31</div>
<div class="box">32</div>
<div class="box">33</div>
<div class="box">34</div>
<div class="box">35</div>
<div class="box">36</div>
<div class="box">37</div>
<div class="box">38</div>
<div class="box">39</div>
<div class="box">40</div>

推荐阅读