CODEWITHSUNDEEP
javascriptjqueryhtmljquery-selectors
Hatim
Hatim

Reputation: 1522

How to select elements with part of attribute's value is between two numbers

I have these elements

<p id="item_1"></p>
<p id="item_5"></p>
<p id="item_200"></p>
<!-- many items with id='item_[200 to 500]' -->
<p id="item_500"></p>
<p id="item_502"></p>
<p id="item_900"></p>

I need to make a selector using jQuery to select items b/w 200 and 500

e.g.

$('p [id="item_%n>200%n<500"]')

Upvotes: 1

Views: 730

Answers (1)

user7637745
user7637745

Reputation: 985

In this particular case:

  1. get the p elements with their ids starting with item_
  2. filter their ids according to your limits (n > 200 && n < 500)
  3. use the elements in the filtered variable according to your needs.

var filtered = $('p[id^="item_"]').filter(function (index, element) {
  var n = parseInt(element.id.split('_')[1], 10);  
  return n > 200 && n < 500;  
});

filtered.each(function (index, element) {
  console.log(element.id);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="item_1"></p>
<p id="item_5"></p>
<p id="item_199"></p>
<!-- many items with id='item_[200 to 500]' -->
<p id="item_200"></p>
<p id="item_201"></p>
<p id="item_300"></p>
<p id="item_400"></p>
<p id="item_499"></p>
<p id="item_500"></p>
<p id="item_501"></p>
<p id="item_502"></p>
<p id="item_900"></p>

OR ES6:

const filtered = $('p[id^="item_"]').filter((index, element) => {
  const n = parseInt(element.id.split('_')[1], 10);  
  return n > 200 && n < 500;  
});

filtered.each((index, element) => console.log(element.id))
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="item_1"></p>
<p id="item_5"></p>
<p id="item_199"></p>
<!-- many items with id='item_[200 to 500]' -->
<p id="item_200"></p>
<p id="item_201"></p>
<p id="item_300"></p>
<p id="item_400"></p>
<p id="item_499"></p>
<p id="item_500"></p>
<p id="item_501"></p>
<p id="item_502"></p>
<p id="item_900"></p>

OR "the dirty one-liner":

Remark: The solution below is presented for the case of possibility. I strongly discourage the usage of such condensed and unnecessarily compact code below.

const filtered = $('p[id^="item_"]').filter((idx, el) => (n => n > 200 && n < 500)(parseInt(el.id.split('_')[1], 10)));

filtered.each((idx, el) => console.log(el.id))
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="item_1"></p>
<p id="item_5"></p>
<p id="item_199"></p>
<!-- many items with id='item_[200 to 500]' -->
<p id="item_200"></p>
<p id="item_201"></p>
<p id="item_300"></p>
<p id="item_400"></p>
<p id="item_499"></p>
<p id="item_500"></p>
<p id="item_501"></p>
<p id="item_502"></p>
<p id="item_900"></p>

Upvotes: 2

Related Questions