Как выбрать элементы с частью значения атрибута между двумя числами

Question

У меня есть эти элементы

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

Мне нужно сделать селектор, используя jQuery для выбора элементов ч / б 200 и 500

, например

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

Answer 1

В данном конкретном случае:

1. получить элементы p с их идентификаторами, начинающимися с item_
2. фильтровать их идентификаторы в соответствии с вашими лимитами (n > 200 && n < 500)
3. используйте элементы в переменной filtered в соответствии с вашими потребностями.

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>

ИЛИ 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>

ИЛИ «грязный однострочный»:

Примечание: приведенное ниже решение представлено для случая возможности. Я настоятельно не рекомендую использовать такой сокращенный и излишне компактный код ниже.

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>