Question

假设我有一个像这样的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？

Answer 1

使用.each()

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

Answer 2

使用$.map()就像

一样简单

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

演示：Fiddle

Answer 3

您可以使用.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>

Answer 4

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

jQuery - 查找类中的所有ID

4 个答案: