Question

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

为什么上述工作没有，我该怎么做？

Answer 1

jQuery方式：

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

在你的例子中：

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

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

或通过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')抓取指定的DOM foo属性，而$('#test').attr('foo')抓取指定的HTML foo属性，您可以找到更多有关差异的详细信息here。

Answer 2

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

如果您的匹配集包含多个元素，则可以使用传统的.each iterator返回包含每个ID的数组：

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

或者，如果您愿意加入一点点粗糙，可以避免使用包装并使用.map shortcut。

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

$('#test')返回一个jQuery对象，因此您无法仅使用object.id来获取其Id

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

这也可以按照以下方式完成，

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

Answer 9

好吧，似乎还没有解决方案，并且想提出我自己的解决方案，这是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。字符串值数组用于事件，使用多元素选择器。

Answer 10

对于找到此帖子的其他人可能有用。以下代码仅在您已经使用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();

Answer 11

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

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

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

Answer 12

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

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

Answer 13

这是一个老问题，但截至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!

Answer 14

这可以是元素id，类，也可以自动使用偶数

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

Answer 15

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

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

Answer 16

<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 file 
    include("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 rows 
    if(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 request
if(isset($_POST['id']) && isset($_POST['id']) != "")
{
    // include Database connection file
    include("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));
    }
}
?>

Answer 17

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

Answer 18

这将最终解决您的问题：

假设您在页面上有许多按钮，并且您希望使用jQuery Ajax（或非ajax）更改其中一个按钮，具体取决于其ID。

还可以说你有许多不同类型的按钮（用于表单，用于批准和用于类似目的），并且你希望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>

代码取自w3schools并更改。

Answer 19

重要提示：如果您使用jQuery创建新对象并绑定事件，则必须使用 prop 而不是 attr ，就像这样：

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

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

19 个答案: