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


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

为什么上述工作没有,我该怎么办呢?


1110
2017-07-13 17:11


起源




答案:


jQuery方式:

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

在你的例子中:

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

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

或者通过DOM:

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

甚至 :

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

和使用背后的原因 $('#test').get(0) 在JQuery甚至 $('#test')[0] 就是它 $('#test') 是一个JQuery选择器和 返回结果的数组() 默认功能不是单个元素

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

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

这与...不同 .attr() 和 $('#test').prop('foo') 抓取指定的DOM foo 财产,而 $('#test').attr('foo') 抓取指定的HTML foo 属性,您可以找到有关差异的更多详细信息 这里


1816
2017-07-13 17:12



每次jQuery没有这样的快捷方式时,我都会感到惊讶 $('#test').id()。 - awe
它很少有用,因为id通常硬编码到HTML和JS中。当您编写JS时,您已经知道某个元素的ID,因此您可以编写该ID来检索该元素。您很少需要以编程方式获取元素的ID。 - daniel1426
很少?这个问题有112106条评论:-) - Simon_Weaver
做164969次。再加上我现在在这里。我有初始化表单的代码。一些表格有特殊要求。一世 可以寻找特定的表单元素来决定做什么,但我认为识别表单 - 因此表单的id - 是最合乎逻辑和最可靠的方式。 - Slashback
为什么我需要获取元素的ID?因为我有一个事件处理程序附加到一个元素类,我需要知道哪个特定元素触发了事件。我希望我做得对。 - Buttle Butkus


$('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})

70
2017-07-13 17:13



顺便说一下,我想 retval.push($(this).attr('id')) 可以写 retval.push(this.id) - Darren Cook
如果您需要HMTL5数据的属性 - **,请使用以下内容: return $('.selector').map(function(i, dom){ return $(dom).attr('data-id'); }) - revoke
.selector属性在jQuery 1.7中已弃用,仅维护到在jQuery Migrate插件中支持.live()所需的程度。该属性从来不是选择器的可靠指示器,可用于获取当前包含在jQuery集中的元素集,它是属性,因为后续遍历方法可能已更改集。 - Andrew Day


id 是一个HTML的属性 Element。但是,当你写作 $("#something"),它返回一个包装匹配的DOM元素的jQuery对象。要返回第一个匹配的DOM元素,请调用 get(0)

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

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

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

这就是原因所在 id 不适用于您的代码。

或者,使用jQuery attr 方法作为其他答案建议得到 id 第一个匹配元素的属性。

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

37
2017-07-13 17:16





以上答案很棒,但随着jquery的发展......所以你也可以这样做:

var myId = $("#test").prop("id");

24
2017-12-05 16:46



实际上,这是这种做法的折旧方式: api.jquery.com/attr - cjbarth
@cjbarth attr() 在1.0中添加了,和 prop() 在1.6中添加,所以我假设你的评论是 prop() 是新的方式。 - Erik Philips
@ErikPhilips我相信,而不是旧方式和新方式,这取决于你是否对页面加载时的原始输出感兴趣(attr)或可能由脚本修改的(prop)。如果你实际上没有修改 id 那么使用客户端脚本的任何元素的属性 prop 和 attr 是相同的。 - AntonChanning


$.fn.extend({
    id : function() {
        return this.attr('id');
    }
});

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

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


20
2017-09-25 13:15



你去那里,因为那些抱怨jQuery没有.id()方法的人! - Jacob McKay


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

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


10
2017-07-13 17:17





如果你想得到一个元素的ID,让我们说一个类选择器,当一个事件(在这种情况下是click事件)被触发该特定元素时,那么下面将完成这个工作:

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

7
2018-05-29 10:35





$('#test') 返回一个jQuery对象,所以你不能简单地使用 object.id 得到它 Id

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

这也可以如下完成,

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


5
2017-07-13 17:16



.. 并且 $('#test')[0].id 这是一样的 .get(0) - Gabriele Petrioli