如何选择部分属性值在两个数字之间的元素

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元素，其ID以item_开头
2. 根据您的限制（n > 200 && n < 500）过滤其ID
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>