jQuery - 查找类中的所有 ID

jQuery - find all IDs in a class

提问by eye

Let's say i have a html table like this:

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

How can i loop through/get all ids of class "red" using jQuery?

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

回答by Anton

Use .each()

使用.each()

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

回答by Arun P Johny

Using $.map()as easy as

使用$.map()一样简单

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

Demo: Fiddle

演示：小提琴

回答by pala?н

You can do this using the .map()method like:

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

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

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

---

---

Explanation:-

解释：-

• Here the below code:-

  $('.red').map(function () {
      return this.id;
  })
  

  we are passing each element in the current matched set .redthrough a function, producing a new jQuery object containing the return values, which is the idof the each element. So, the above code results in a new jQuery object like:

  ["a", "b", "c", "d", prevObject: jQuery.fn.init[4], context: document]
  

• Next, .get()is used to retrieve the DOM elements matched by the new jQuery object above. So, after using .get()our result is like:

  ["a", "b", "c", "d"]
  

• Next, .join()method joins all elements of an array (which we got after using .get()) into a string like:

  a,b,c,d
  

  If we use .join(', ')we can get some space after comma like:

  a, b, c, d
  

  or a .join('~')would result in:

  a~b~c~d
  

  You can always modify the separator in the .join()based on your requirement.

• 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>

• 这里是下面的代码：-

  $('.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()method 将数组的所有元素（我们在使用后得到的.get()）连接成一个字符串，如下所示：

  a,b,c,d
  

  如果我们使用，.join(', ')我们可以在逗号后得到一些空格，例如：

  a, b, c, d
  

  或 a.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>

回答by Jaime Montoya

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