jQuery - 查找类中的所有 ID答案

【问题标题】：jQuery - find all IDs in a classjQuery - 查找类中的所有 ID
【发布时间】：2013-09-06 11:46:50
【问题描述】：

假设我有一个这样的 html 表：

<table>
<tr id="a" class="red"><td>test</td></tr>
<tr id="b" class="red"><td>test</td></tr>
<tr id="c" class="red"><td>test</td></tr>
<tr id="d" class="red"><td>test</td></tr>
<tr id="e" class="green"><td>test</td></tr>
<tr id="f" class="blue"><td>test</td></tr>
</table>

如何使用 jQuery 循环/获取“red”类的所有 id？

【问题讨论】：

标签： jquery class

【解决方案1】：

您可以使用.map() 方法执行此操作，例如：

var ids = $('.red').map(function () {
    return this.id;
}).get().join();

console.log(ids);  // Result: a,b,c,d

说明：-

这里是下面的代码：-
```
$('.red').map(function () {
    return this.id;
})
```
我们通过一个函数传递当前匹配集合.red 中的每个元素，生成一个包含返回值的新jQuery 对象，即每个元素的id。因此，上面的代码生成了一个新的 jQuery 对象，如：
```
["a", "b", "c", "d", prevObject: jQuery.fn.init[4], context: document]
```
接下来，.get() 用于检索上面新的 jQuery 对象匹配的 DOM 元素。所以，在使用.get() 之后，我们的结果是这样的：
```
["a", "b", "c", "d"]
```
接下来，.join() 方法将数组的所有元素（我们在使用 .get() 后得到）连接成一个字符串，如下所示：
```
a,b,c,d
```
如果我们使用.join(', ')，我们可以在逗号后得到一些空格，例如：
```
a, b, c, d
```
或.join('~') 会导致：
```
a~b~c~d
```
您可以随时根据需要修改.join() 中的分隔符。

var ids = $('.red').map(function() {
  return this.id;
}).get().join();

console.log(ids); // Result: a,b,c,d

.red{color:red;}
.green{color:green;}
.blue{color:blue;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<table>
  <tr id="a" class="red"><td>test</td></tr>
  <tr id="b" class="red"><td>test</td></tr>
  <tr id="c" class="red"><td>test</td></tr>
  <tr id="d" class="red"><td>test</td></tr>
  <tr id="e" class="green"><td>test</td></tr>
  <tr id="f" class="blue"><td>test</td></tr>
</table>

【讨论】：

【解决方案2】：

使用.each()

var idArray = [];
$('.red').each(function () {
    idArray.push(this.id);
});

【讨论】：

一分钟三个答案，每个人都在工作。谢谢！我标记了这个，因为最后我决定使用这个。很遗憾我无法标记所有这些...
或 var idArray = []; $('.red').each(function () { idArray.push($(this).attr('id')); });

【解决方案3】：

使用$.map() 就这么简单

//ids is an array of the element ids with class red
var ids = $('table .red').map(function(){
    return this.id
}).get()

演示：Fiddle

【讨论】：

【解决方案4】：

$('.red').each(function(){
    confirm(this.id);
});

【讨论】：