如何 select 具有部分属性值的元素在两个数字之间

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>

我需要制作一个 select 或使用 jQuery 到 select 项目 b/w 200 和 500

例如

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

Answer 1

在这种特殊情况下：

获取 ID 以 item_

p

根据您的限制过滤他们的 ID (n > 200 && n < 500)
根据需要使用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>

或"the dirty one-liner":

备注：以下解决方案是针对可能的情况给出的。我强烈反对使用下面这种精简和不必要的紧凑代码。

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>

如何 select 具有部分属性值的元素在两个数字之间

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

html

javascript

jquery

jquery-selectors