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

Question

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

为什么上面的代码不起作用，我该如何解决？

- fearofawhackplanet

---

如何获取被选中元素的ID？o.O - Martin Schneider

示例代码。我正在开发一个事件触发器，它使用“this”，我需要知道是什么触发了该事件，并独立跟踪每个元素被触发的次数。使用“this”构建样本将会非常大。 - Nelson

请看这里：https://gist.github.com/ykessler/52f8af9877a216a9169c9704b57ebf9e - Yarin

Answer 1

使用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;

$('#test').get(0)或者$('#test')[0]在JQuery中使用的原因是$('#test')返回一个结果数组，而不是一个单一元素。

JQuery中另一种DOM选择器的替代方法是

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

这与.attr()和$('#test').prop('foo')不同，前者获取指定的DOM foo属性，而后者获取指定的HTML foo属性。您可以在此处找到更多差异的详细信息。

- instanceof me

---

每次看到jQuery没有像$('#test').id()这样的快捷方式，我都感到惊讶。 - awe

这个方法很少有用，因为id通常被硬编码到HTML和JS中。当你编写JS时，已经知道某个元素的ID，所以你会写下该ID来检索该元素。你很少需要通过程序获取元素的ID。 - daniel1426

把它做164969次。而且现在我在这里。我有一个可以初始化表单的代码。其中几个表单有特殊要求。我本来可以查找特定的表单元素来决定该怎么做，但我认为识别表单 - 因此表单的ID - 是最合乎逻辑和可靠的方法。 - Slashback

为什么需要获取元素的id？因为我已经将事件处理程序附加到一类元素上，并且需要知道触发事件的具体元素。希望我的做法是正确的。 - Buttle Butkus

哎呀，改成1,122,603次... :P - BvuRVKyUVlViVIc7

Answer 2

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

- Steven

---

顺便说一下，我认为"retval.push($(this).attr('id'))"可以写成"retval.push(this.id)"。 - Darren Cook

如果您需要HTML5数据属性，则可以使用以下代码： return $('.selector').map(function(i, dom){ return $(dom).attr('data-id'); }) - revoke

.selector属性在jQuery 1.7中已被弃用，仅在支持jQuery Migrate插件中的.live()所需的范围内进行维护。该属性从未是一个可靠的指示器，可以用来获取当前包含在jQuery集合中的元素集的选择器，因为后续的遍历方法可能会改变该集合。 - Andrew Day

Answer 3

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")

- Anurag

Answer 4

前面的回答很好，但随着jquery的发展...你也可以这样做：

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

- Chris

---

attr()是在1.0版本中添加的，而prop()是在1.6版本中添加的，因此我认为你的评论应该是指prop()是新的方式。 - Erik Philips

我认为，与其说是旧方法和新方法，更取决于你是否对页面加载时的原始输出（attr）或潜在地被脚本修改过的输出（prop）感兴趣。如果你没有使用客户端脚本实际修改任何元素的id属性，则prop和attr是相同的。 - AntonChanning

Answer 5

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

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

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

- stat

Answer 6

如果您想获取一个元素的ID，比如通过类选择器，在特定元素上触发事件（在本例中为单击事件），那么以下内容就可以实现：

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

- Jay Query

---

最佳答案在这么靠后的位置，真是令人失望。 - franklylately

Answer 7

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

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

- Joey C.

Answer 8

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

在您的示例中：

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

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

- Kumar

Answer 9

    $("#button").click(function() {
      var clickID = $("#testDiv").attr("id");
      console.log(clickID)
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="testDiv"> When button will click you'll get this id value </div>
<button id="button"> Button </button>

- Umair Hanif

---

此答案已在低质量队列中进行了审核。以下是如何撰写好的答案？的一些指南。仅有代码的答案不被认为是好的答案，并且很可能会因为对学习者社区不够有用而被投票降低或删除。这只是对您来说很明显。请解释它的作用，以及它与现有答案的不同之处/ 优点。来自审核。 - Trenton McKinney

Answer 10

看起来目前还没有解决方案，我想提出自己的解决方案，这是 JQuery 原型的扩展。我将其放在 Helper 文件中，在 JQuery 库加载后加载，因此要检查 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库的开端。

返回单个字符串值或字符串值数组。如果使用了多元素选择器，则返回字符串值数组。

- GoldBishop

---

是的，基本上我最終所做的是使用“$.fn.id = function (){...}”，但结果似乎與您的相同：jqelement.id() = "..."。在“prototype”中是否比“fn”更受欢迎？ - horace

@horace，这取决于你的个人喜好...另外，框架也会随着时间变化而改变，因此与当前用法相比，原型可能是一种过时的用法。 - GoldBishop