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

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

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

2501863 次浏览
小开
最佳答案

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').get(0)甚至$('#test')[0]的原因是$('#test')是一个JQuery选择器，返回结果的数组（）不是其默认功能的单个元素

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

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

不同于.attr()和$('#test').prop('foo')抓取指定的DOMfoo属性，而$('#test').attr('foo')抓取指定的超文本标记语言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})
小开

$('#test')返回一个jQuery对象，所以你不能简单地使用object.id来获取它的Id

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

这也可以通过以下方式完成，

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

小开

id是htmlElement的属性。但是，当您编写$("#something")时，它会返回一个包装匹配DOM元素的jQuery对象。要取回第一个匹配的DOM元素，请调用get(0)

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

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

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

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

或者，按照其他答案的建议，使用jQuery的attr方法来获取第一个匹配元素的id属性。

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

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

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

小开 
$('tagname').attr('id');

使用上面的代码，您可以获得id。

小开

上面的答案很棒，但随着jQuery的发展…所以你也可以这样做：

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

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

小开

如果你想获得一个元素的ID，让我们说通过一个类选择器，当一个事件（在这种情况下是单击事件）在该特定元素上被触发时，下面的操作将完成这项工作：

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

重要提示：如果您使用jQuery创建新对象并绑定事件，您必须使用道具而不是attr，如下所示：

$("<div/>",{ id: "yourId", class: "yourClass", html: "<span></span>" }).on("click", function(e) { alert($(this).prop("id")); }).appendTo("#something");

小开

这可以是元素ID、类或自动使用偶

------------------------$(this).attr('id');=========================------------------------$("a.remove[data-id='2']").attr('id');=========================------------------------$("#abc1'").attr('id');=========================
小开

这将最终解决您的问题：

假设您在一个页面上有许多按钮，并且您希望根据它们的ID使用jQuery Ajax（或不是ajax）更改其中一个按钮。

假设您有许多不同类型的按钮（用于表单，用于批准和类似目的），并且您希望jQuery仅处理“喜欢”按钮。

这是一个正在运行的代码：jQuery将只处理. cls-hlpb类的按钮，它将获取被点击按钮的ID并将根据来自ajax的数据更改它。

<!DOCTYPE html><html><head><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">    </script><script>$(document).ready(function(){$(".clshlpbtn").on('click',function(e){var id = $(e.target).attr('id');alert("The id of the button that was clicked: "+id);$.post("demo_test_post.asp",{name: "Donald Duck",city: "Duckburg"},function(data,status){
//parsing the data should come here://var obj = jQuery.parseJSON(data);//$("#"+id).val(obj.name);//etc.
if (id=="btnhlp-1")$("#"+id).attr("style","color:red");$("#"+id).val(data);});});



});</script></head><body>
<input type="button" class="clshlpbtn" id="btnhlp-1" value="first btn">    </input><br /><input type="button" class="clshlpbtn" id="btnhlp-2" value="second btn">    </input><br /><input type="button" class="clshlpbtn" id="btnhlp-9" value="ninth btn">    </input>
</body></html>

代码取自w3学校并进行了更改。

小开

这是一个老问题，但截至2015这实际上可能有效：

$('#test').id;

你也可以做作业：

$('#test').id = "abc";

只要您定义以下JQuery插件：

Object.defineProperty($.fn, 'id', {get: function () { return this.attr("id"); },set: function (newValue) { this.attr("id", newValue); }});

有趣的是，如果element是一个DOM元素，那么：

element.id === $(element).id; // Is true!
小开

也许对找到此线程的其他人有用。下面的代码仅在您已经使用jQuery时才有效。该函数始终返回一个标识符。如果元素没有标识符，则该函数生成标识符并将其附加到元素中。

var generatedIdCounter = 0;
$.fn.id = function() {var identifier = this.attr('id');
if(!identifier) {generatedIdCounter++;identifier = 'isGenerated_' + generatedIdCounter;
this.attr('id', identifier);}
return identifier;}

如何使用：

$('.classname').id();
$('#elementId').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'));});
小开

由于id是一个属性，您可以使用attr方法获取它。

小开 
<html><head><link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script></head><?php// include Database connection fileinclude("db_connection.php");
// Design initial table header$data = '<table class="table table-bordered table-striped"><tr><th>No.</th><th>First Name</th><th>Last Name</th><th>Email Address</th><th>Update</th><th>Delete</th></tr>';$query = "SELECT * FROM users";if (!$result = mysqli_query($con, $query)) {exit(mysqli_error($con));}// if query results contains rows then featch those rowsif(mysqli_num_rows($result) > 0){$number = 1;while($row = mysqli_fetch_assoc($result)){$data .= '<tr><td>'.$number.'</td><td>'.$row['first_name'].'</td><td>'.$row['last_name'].'</td><td>'.$row['email'].'</td><td><button onclick="DeleteUser('.$row['id'].')" class="btn btn-danger">Delete</button></td></tr>';$number++;}}
else{// records now found$data .= '<tr><td colspan="6">Records not found!</td></tr>';}
$data .= '</table>';echo $data;?>
<script type="text/javascript">
function DeleteUser(id) {var conf = confirm("Are you sure, do you really want to delete User?");if (conf == true) {$.ajax({url:'deleteUser.php',method:'POST',data:{id:id},success:function(data){alert('delete successfully');}



}});
deleteUser.php
<?php// check requestif(isset($_POST['id']) && isset($_POST['id']) != ""){// include Database connection fileinclude("db_connection.php");
// get user id$user_id = $_POST['id'];
// delete User$query = "DELETE FROM users WHERE id = '$user_id'";if (!$result = mysqli_query($con, $query)) {exit(mysqli_error($con));}}?>
小开

它不回答OP，但其他人可能会感兴趣：在这种情况下，您可以访问.id字段：

$('#drop-insert').map((i, o) => o.id)
小开 

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


提交答案