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

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. 根据您的限制过滤他们的 ID (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>