Question

在我的搜索中，我发现了很多关于如何找到以特定字符串结尾的元素的问题/答案。我做了一个快速搜索，并没有找到任何具体的关于如何找到以变量结尾的元素。我确实找到this question/answer关于如何在jQuery选择器中使用Javascript变量但我无法让它工作，我想知道是不是因为我正在尝试对付我已经过滤到的一组元素

以下是我已经过滤过的元素的一些内容：

["ms-goal-select-0", "ms-goal-input-0", "ms-goal-select-1", "ms-goal-input-1", "ms-goal-select-2", "ms-goal-input-2"]

这是for循环的（开始）我想用来查找和使用select和input元素：

for (var x=0;;x++) { //will break when element(s) not found
    selectEl = filteredElements.find('[id$="select-' + x + '"]');
    inputEl = filteredElements.find('[id$="input-' + x + '"]');
    ....

但是上面没有找到x==0时从第一次迭代开始的元素。我做错了什么？

Answer 1

尝试使用filter代替find：

for (var x=0;;x++) { //will break when element(s) not found
    selectEl = filteredElements.filter('[id$="select-' + x + '"]');
    inputEl = filteredElements.filter('[id$="input-' + x + '"]');
    ....

仅查找filteredElements中元素的匹配子元素，而filter查看元素本身。

Answer 2

jQuery的.find()仅在后代中进行搜索。我想你想做一个.filter()。我使用.filter()版本来编写它，它使用一个函数并使用正则表达式来匹配你想要的元素：

var filteredElements = $("div");
var selectEl = filteredElements.filter(function() {
  return this.id.match(/.-select-\d*$/);
});
var inputEl = filteredElements.filter(function() {
  return this.id.match(/.-input-\d*$/);
});

console.log(selectEl.toArray());
console.log(inputEl.toArray());

<script src="http://gh-canon.github.io/stack-snippet-console/console.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="ms-goal-select-0"></div>
<div id="ms-goal-input-0"></div>
<div id="ms-goal-select-1"></div>
<div id="ms-goal-input-1"></div>
<div id="ms-goal-select-2"></div>
<div id="ms-goal-input-2"></div>

查找以变量结尾的元素

2 个答案: