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

Question

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

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

Answer 1

jQuery方式:

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

在你的例子中:

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

或者通过DOM:

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

甚至 :

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

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

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

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

.attr()与$('#test').prop('foo')抓取指定的DOM foo属性不同,并且抓取指定的DOM 属性,同时$('#test').attr('foo')抓取指定的HTML foo属性,您可以在此处找到有关差异的更多详细信息.

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

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

Answer 4

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

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

Answer 5

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

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

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

Answer 6

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

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

Answer 7

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

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

Answer 8

    $("#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>

Answer 9

$('#test').attr('id') 在你的例子中：

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

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

Answer 10

好吧,似乎还没有解决方案,并且想提出我自己的解决方案,这是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库中的开始.

返回单个字符串值或字符串值Array.字符串值Array用于事件,使用多元素选择器.