如何使用 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'));
});

<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]< 的原因/code> 是 $('#test') 是一个 JQuery 选择器，并且返回结果的 array()，其默认功能不是单个元素，而是

DOM 的替代方案jquery 中的选择器

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

与 .attr() 不同，$('#test').prop('foo') 抓取指定的 DOM foo< /code> 属性，而 $('#test').attr('foo') 获取指定的 HTML foo 属性，您可以找到有关差异的更多详细信息此处。

Answer 2

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

如果您的匹配集包含多个元素，您可以使用传统的 .each 迭代器< /a> 返回一个包含每个 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（假设通过类选择器），当在该特定元素上触发事件（在本例中为单击事件）时，则以下代码将完成这项工作：

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

Answer 7

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

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

Answer 8

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

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

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

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>

Answer 10

好吧，似乎还没有解决方案，我想提出我自己的解决方案，即 JQuery 原型的扩展。我将其放入在 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 库中的一个开始。

返回单个字符串值或字符串值数组。字符串值数组用于使用多元素选择器的事件。

Answer 11

$('#test') 返回一个 jQuery 对象，因此您不能简单地使用 object.id 来获取

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

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

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

Answer 12

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

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

Answer 13

也许对找到此线程的其他人有用。仅当您已经使用 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 14

这是一个老问题，但是从 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 15

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

Answer 16

这可以是元素 id 、 class ，或者自动使用 Even

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

Answer 17

这将最终解决您的问题：

假设您在页面上有许多按钮，并且您想根据按钮的 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>

代码取自 w3schools 并进行了更改。

Answer 18

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

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

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

Answer 20

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

$("

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