CODEWITHSUNDEEP
javascriptjquery
Behseini
Behseini

Reputation: 6328

How to Select Elements Between A range in jQuery

Can you pls take a look at this demo and let me know how I can remove .d-none class from element which located between two given numbers? Foe example I just want to show .box which are between 1 to 6 and hide all other boxes 

$("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>

Upvotes: 0

Views: 230

Answers (4)

KooiInc
KooiInc

Reputation: 122986

In plain es20xx

{
  // helper to determine if number is between min and max
  const between = (number, min, max) => number >= min && number <= max;
  document.addEventListener("click", showSelection);

  function showSelection(evt) {
    // act only if clicked element contains [data-between] ('event delegation')
    if (evt.target.dataset.between) {
      // determine min and max based on [data-between]
      const minMax = evt.target.dataset.between.split(",").map(Number);
      [...document.querySelectorAll(".box")]
      .forEach(box => {
        // determine what to do with box.classList based on 
        // number between min and max
        const addOrRemove = between(+box.textContent, minMax[0], minMax[1]) ?
          "remove" : "add";
        // do it
        box.classList[addOrRemove]("d-none");
      });
    }
  }
}
.box {
  background: gold;
  height: 60px;
  width: 60px;
  color: black;
  text-align: center;
  line-height: 50px;
  float: left;
  margin: 2px;
}

.d-none {
  display: none;
}
<button data-between="1,6">1 - 6</button>
<button data-between="10,26">10 - 26</button>
<button data-between="12,36">12 - 36</button>
<button data-between="0,40">all</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>

Upvotes: 1

dale landry
dale landry

Reputation: 8610

Use .removeClass() on the elements along with slice(). Call your selector, then slice the elements index adding the elements you wish to show and then removeClass('d-none').

Also, get the values of your elements attr('id'), slice that info and grab the actual values set in the buttons. Adjust key value starting at 0 with -1 and it is more dynamic.

$("button").on("click", function(e) {
    var id = $(this).attr('id');
    var opt1 = $('#1').text().split(' - ');  
    var opt2 = $('#2').text().split(' - '); 
    var opt3 = $('#3').text().split(' - '); 

    if (id == 1) {
        $('.box').addClass('d-none');
        $('.box').slice(opt1[0]-1,opt1[1]).removeClass('d-none');
        }
    if (id == 2) {
        $('.box').addClass('d-none');
        $('.box').slice(opt2[0]-1,opt2[1]).removeClass('d-none');
    }
    if (id == 3) {
        $('.box').addClass('d-none');
        $('.box').slice(opt3[0]-1,opt3[1]).removeClass('d-none');
    }
    if (id == 4) {
        $('.box').removeClass('d-none');
    }
});
.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>
<button id="4">Show All</button>

<br />
<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>

Upvotes: 0

thex
thex

Reputation: 620

An additional solution if you have to check for the <div> content:

$("button").on("click", function(e) {
  var id = parseInt($(this).attr('id')); // get button id to decide

  // if you need to determine the range directly from the button content 
  // you should here extract the start and end value and use it 
  // afterwards for the if. In this case you can omit fixed ranges and 
  // the switch statement.
  // var start = parseInt($(this).html().split(" - ")[0]);
  // var end = parseInt($(this).html().split(" - ")[1]);

  $('.box').addClass('d-none'); // hide all divs
  var func = function() {
    var val = parseInt($(this).html()); // get div content value

    // use the button start and end values instead of the switch below
    // if(val >= start && val <= end) {
    //   $(this).removeClass('d-none');
    // }

    switch(id) {
      case 1:
       if(val >= 1 && val <= 6) { // show only ids for button 1
         $(this).removeClass('d-none');
       }
       break;
      case 2:
       if(val >= 10 && val <= 26) { // show only ids for button 2
         $(this).removeClass('d-none');
       }
       break;
      case 3:
       if(val >= 12 && val <= 36) { // show only ids for button 3
         $(this).removeClass('d-none');
       }
       break;
    }
  };

  $('.box').each(func);
});
.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>

Explanation in the code!

Upvotes: 1

palaѕн
palaѕн

Reputation: 73966

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>

Upvotes: 2

Related Questions