javascript - 如何选择具有部分属性值的元素在两个数字之间
问题描述
我有这些元素
<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 制作一个选择器来选择 b/w 200 和 500 的项目
例如
$('p [id="item_%n>200%n<500"]')
解决方案
在这种特殊情况下:
- 获取
p
以 id 开头的元素item_
- 根据您的限制过滤他们的 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>
或“肮脏的单线”:
备注:下面的解决方案是针对可能的情况提出的。我强烈反对在下面使用这种精简且不必要的紧凑代码。
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>
推荐阅读
- arrays - 如何比较MongoDB中同一对象的数组元素?
- azure - 计算成本 SonarQube - Azure
- liquibase - Liquibase 和 JAR 依赖项
- ios - 在swift 5的同一行声明和初始化变量或常量?
- javascript - 如何在javascript中检查某人是否在井字游戏中获胜?
- python - 在图例 MATPLOTLIB 前面绘制箭头
- algorithm - 使用邻接矩阵区分图和树
- angularjs - 在应用程序中访问 angularjs i18n 日期/时间和货币格式
- c# - 如何在 Asp.Net Core 3.1 上创建两类用户
- mongodb - MongoDB - 如何从聚合结果中删除 _id:null?