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


How can I get the ID of an element using jQuery?

1
2
3
  $(document).ready(function() {
    alert($('#test').id);
  });

为什么上面的内容不起作用，我该怎么做呢？

茶路：jQueryP＞＜／

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

在你的实例：P＞＜／

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

通过DOM or the：P＞＜／

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

或是：P＞＜／

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

在与$('#test').get(0)usage of reason is that $('#test')[0]或甚至在jQuery和jQuery选择器：在$('#test')is results of an阵列()返回其默认模式不是单一功能性元素P＞＜／

安在jQuery选择器：is for DOM替代P＞＜／

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

.attr()which is different from the specified DOM和$('#test').prop('foo')grabs foowhile the property，$('#test').attr('foo')grabs HTML属性指定的fooYou can find more details about和之间的在这里。P＞＜／

相关讨论

Will Return of the the $('selector').attr('id')第一ID匹配的元素。参考。P＞＜／

如果你超过一元contains匹配集，你可以使用普通的迭代器返回.eachthe to each of the IDS含安阵列：P＞＜／

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

或者，如果你愿意在小grittier to get the wrapper avoid，你可以使用.map& the shortcut。P＞＜／

1
return $('.selector').map(function(index,dom){return dom.id})
相关讨论

Idis a property of an ElementHTML。不管一个人多，当你写$("#something")jQuery对象，它返回到匹配的DOM元素粘贴that the(S)。to get the first匹配的DOM元素后，呼叫get(0)P＞＜／

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

这片乡土元素，你可以呼叫ID，或任何其他财产或原生DOM函数。P＞＜／

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

这是the reason Id为什么不在你的工作队列。P＞＜／

alternatively，使用jquery' S attrmethod as to get the other蓝晶石answers of the第一Id属性匹配的元素。P＞＜／

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

but as above answers是伟大的，evolves jQuery。我也知道你可以：P＞＜／

1
var myId = $("#test").prop("id");
相关讨论

1
2
3
4
5
6
7
$.fn.extend({
    id : function() {
        return this.attr('id');
    }
});

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

一些代码来检查easily学院课程，但要实现！P＞＜／

相关讨论

.idis not a valid jQuery函数。You need to the function to access属性使用.attr()possesses安元。你可以使用属性值的变化.attr()to both an specifying双模式或参数，get the value by specifying酮。P＞＜／

http：/ / / / api.jquery.com attrP＞＜／

如果你想让安安元ID of，by a class选择器：让我们说，when an event(在这家在线点击事件)，特异性为烧元，then the following the job会给你：P＞＜／

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

嗯，似乎还没有解决方案，我想提出我自己的解决方案，那就是对jquery原型的扩展。我把它放在jquery库之后加载的助手文件中，因此检查window.jQuery。

1
2
3
4
5
6
7
8
9
10
11
12
13
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')归来jQuery对象，你不能使用简单的object.idITS Idto getP＞＜／

You need to which使用$('#test').attr('id')归来，你来Idof the元P＞＜／

这也可以做为的是好的，P＞＜／

$('#test').get(0).idwhich is equal to document.getElementById('test').idP＞＜／

相关讨论

useful for that find this…其他线程。只会工作队列below the如果你已经使用jQuery。the function归来总是安标识符。if the元不我有一个标识符标识符和generates the the函数append this to the元。P＞＜／

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var generatedIdCounter = 0;

$.fn.id = function() {
    var identifier = this.attr('id');

    if(!identifier) {
        generatedIdCounter++;
        identifier = 'isGenerated_' + generatedIdCounter;

        this.attr('id', identifier);
    }

    return identifier;
}

如何使用：P＞＜／

1
2
3
$('.classname').id();

$('#elementId').id();

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

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

this is an old but as of this question，2015年可能真的工作：P＞＜／

1
$('#test').id;

你也可以让assignments：P＞＜／

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

只要你定义下面的jQuery插件。P＞＜／

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

interestingly ElementDOM元素，如果是，那么：P＞＜／

1
element.id === $(element).id; // Is true!
1
$('tagname').attr('id');

你可以把上面的代码使用的ID。P＞＜／

This can be automatically元ID，类，或使用任何P＞＜／

1
2
3
4
5
6
7
8
9
------------------------
$(this).attr('id');
=========================
------------------------
$("a.remove[data-id='2']").attr('id');
=========================
------------------------
$("#abc1'").attr('id');
=========================
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<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 src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
    </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));
    }
}
?>

最后，这将解决你的问题：P＞＜／

让我们说你有多在你的在线主页按钮change one of them，想用jQuery的AJAX(or not on their ID depending Ajax)。P＞＜／

让我们说，你也有不同的按钮(for many forms of type for类用途，批准和for)，你想"only the the jQuery意向治疗类"的按钮。P＞＜／

that is here is a队列的工作：the only the buttons，jQuery会把.cls - hlpb are of class，它将把ID of the button that was the clicked根据EN和Will that to the change from the AJAX来的日期。P＞＜／

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">    

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




});

</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>

was taken from W3Schools的尾巴和改变。P＞＜／

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

重要：如果你是在创造与jQuery对象和事件结合安，你必须使用道具和not属性，这样：P＞＜／

$("",{ id:"yourId", class:"yourClass", html:"" }).on("click", function(e) { alert($(this).prop("id")); }).appendTo("#something");P＞＜／