15

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

4

4 回答 4

29

使用.each()

var idArray = [];
$('.red').each(function () {
    idArray.push(this.id);
});
于 2013-09-06T11:47:53.293 回答
8

您可以使用以下.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"]
    
  • 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>

于 2013-09-06T11:49:14.147 回答
7

使用$.map()就像

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

演示:小提琴

于 2013-09-06T11:48:23.980 回答
0
$('.red').each(function(){
    confirm(this.id);
});
于 2018-08-22T00:39:43.733 回答