logo标签列表

获取具有相同类的元素的ID

jqueryhtml
6
如何获取具有相同类名的元素的每个属性 id？
var id = $('.class').attr('id');

但是当我使用console.log时，它只返回一个id，即使我有多个id和多个具有相同类的div。

4个回答
15
使用 map()。 

var ids = $('.class').map(function() {
  return $(this).attr('id');
});
console.log(ids);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div class="class" id="1"></div>
<div class="class" id="2"></div>
<div class="class" id="3"></div>

将数组列表转换为ids = ids.toArray()。 - gondwe
5
使用jQuery的each函数。
var i = 0;
var ids = [];  
    $(".class").each(function(){
        ids[i++] =  $(this).attr("id"); //this.id
        });
我认为他需要检查的不仅仅是“.class”文件。可能存在多个未知类名。 - Lund
为此需要一些额外的信息，但只是获得具有相同类的每个元素的ID。我认为这将很好。 - Farhan
Farhan修改了它...第一段代码对我来说很好。它是这样的：$（“.class”）.each（function（）{ $（this）.attr（“id”）; // this.id }）;谢谢。 - Ionut Necula
@user3275665 在编辑历史记录中似乎没有任何有效的答案，但可能是遗漏了。无论如何，使用 map() 更好。 - A. Wolff
3

var ids = $('.class').map(function() {
    return this.id;
}).get();
console.log(1, ids);

//For modern browsers with arrow functions
ids = $('.class').map((i, item)=>item.id).get();
console.log(2, ids);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="class" id="a"></div>
<div class="class" id="b"></div>
<div class="class" id="c"></div>

1
很高兴了解 .get()。 - Anthony
3
<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>jQuery.map demo</title>
        <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    </head>
    <body>
        <div class="map-test" id="1"></div>
        <div class="map-test" id="21"></div>
        <div class="map-test" id="31"></div>
        <div class="map-test" id="41"></div>
        <div class="map-test" id="51"></div>
        <div class="map-test" id="61"></div>
        <div class="map-test" id="71"></div>
        <div class="map-test"></div>
        <script>
            var arr = jQuery.map(jQuery('.map-test'),function(n,i){
                return jQuery(n).attr('id');
            });
            console.log(arr);
            //will print ["1", "21", "31", "41", "51", "61", "71"]
        </script>
    </body>
</html>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接