如何使用 jQuery 获取元素的 ID?

<div id="test"></div>
<script>
  $(document).ready(function() {
    alert($('#test').id);
  });  
</script>

为什么上述方法不起作用,我应该怎么做?

答案

jQuery 方式:

$('#test').attr('id')

在您的示例中:

$(document).ready(function() {
  console.log($('#test').attr('id'));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="test"></div>

或通过 DOM:

$('#test').get(0).id;

甚至 :

$('#test')[0].id;

在 JQuery 甚至$('#test')[0]使用$('#test').get(0)$('#test')是一个 JQuery 选择器并返回 array()结果的功能不是单个元素

jQuery 中 DOM 选择器的替代方法是

$('#test').prop('id')

这与.attr()$('#test').prop('foo') ,它获取指定的 DOM foo属性,而$('#test').attr('foo')获取指定的 HTML foo属性,您可以在此处找到有关差异的更多详细信息。

$('selector').attr('id')将返回第一个匹配元素的 ID。 参考

如果匹配的集合包含多个元素,则可以使用常规的.each 迭代器返回包含每个 id 的数组:

var retval = []
$('selector').each(function(){
  retval.push($(this).attr('id'))
})
return retval

或者,如果您愿意加一点勇气,可以避免使用包装器,而可以使用.map 快捷方式

return $('.selector').map(function(index,dom){return dom.id})

id是 html Element的属性。但是,当您编写$("#something") ,它将返回一个 jQuery 对象,该对象包装了匹配的 DOM 元素。要获取第一个匹配的 DOM 元素,请调用get(0)

$("#test").get(0)

在此本机元素上,您可以调用 id 或任何其他本机 DOM 属性或函数。

$("#test").get(0).id

这就是为什么id在您的代码中不起作用的原因。

或者,使用 jQuery 的attr方法作为其他答案,以获取第一个匹配元素的id属性。

$("#test").attr("id")

以上答案很好,但是随着 jquery 的发展.. 您也可以这样做:

var myId = $("#test").prop("id");
$.fn.extend({
    id : function() {
        return this.attr('id');
    }
});

alert( $('#element').id() );

当然需要一些检查代码,但是很容易实现!

.id不是有效的 jquery 函数。您需要使用.attr()函数来访问元素拥有的属性。您可以使用.attr()通过指定两个参数来更改属性值,或者通过指定一个来获取值。

http://api.jquery.com/attr/

如果要获取某个元素的 ID,则由类选择器说,当在该特定元素上触发一个事件(在本例中为 click 事件)时,将执行以下操作:

$('.your-selector').click(function(){
       var id = $(this).attr('id');
 });

好吧,似乎还没有解决方案,并且想提出我自己的解决方案,它是 JQuery 原型的扩展。我将其放在 JQuery 库之后加载的 Helper 文件中,因此检查window.jQuery

if (window.jQuery) {
    $.prototype.id = function () {
        if (this.length > 1) {
            var val = [];
            this.each(function (idx, el) {
                val.push($(el).id());
            });
            return val;
        } else {
            return this.attr('id');
        }
    }
}

它可能并不完美,但是它可能成为包含在 JQuery 库中的开始。

返回单个字符串值或字符串值数组。字符串值数组是用于使用多元素选择器的事件。

$('#test').attr('id')在您的示例中:

<div id="test"></div>

$(document).ready(function() {
    alert($('#test').attr('id'));
});

$('#test')返回一个 jQuery 对象,因此不能简单地使用object.id来获取其Id

您需要使用$('#test').attr('id') ,它返回所需的元素ID

也可以按照以下步骤进行操作:

$('#test').get(0).id等于document.getElementById('test').id