jQueryを使用して要素のIDを取得するにはどうすればよいですか？

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

上記がうまくいかないのはなぜですか、どうすればいいですか？

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;

$('#test').get(0)JQueryでの使用の背後にある理由は、$('#test')[0]それ$('#test')がJQueryセレクタであり、デフォルトの機能によって単一の要素ではなく結果のarray（）を返すことです

jqueryのDOMセレクターの代替は

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

これは、指定されたDOM プロパティ.attr()とは異なり$('#test').prop('foo')、指定されたDOM fooプロパティを$('#test').attr('foo')取得しますが、指定されたHTML 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})

idはhtmlのプロパティですElement。ただし、を書き込む$("#something")と、一致するDOM要素をラップするjQueryオブジェクトが返されます。最初に一致するDOM要素を取得するには、次を呼び出しますget(0)

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

このネイティブ要素では、idまたはその他のネイティブDOMプロパティまたは関数を呼び出すことができます。

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

がidコードで機能しない理由です。

または、attr他の回答が示唆するように、jQueryのメソッドを使用してid、最初に一致する要素の属性を取得します。

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

上記の答えは素晴らしいですが、jqueryが進化するにつれ、次のこともできます。

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

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

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

もちろん、いくつかのチェックコードが必要ですが、簡単に実装できます。

.idは有効なjquery関数ではありません。.attr()要素が持つ属性にアクセスするには、関数を使用する必要があります。使用できます.attr()2つのパラメーターを指定して属性値を変更ことも、1つを指定して値を取得する。

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

要素のIDを取得したい場合、たとえばクラスセレクターで、イベント（この場合はクリックイベント）がその特定の要素で発生したときに、次のように処理します。

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

$('#test').attr('id') あなたの例では：

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

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

まあ、解決策はまだないようで、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ライブラリに含まれるようになるための出発点です。

単一の文字列値または文字列値の配列を返します。文字列値の配列は、多要素セレクターが使用されたイベント用です。

$('#test')jQueryオブジェクトを返すので、単にobject.idその取得に使用することはできませんId

必要な要素$('#test').attr('id')を返すを使用する必要IDがあります

これは、次のように行うこともできます。

$('#test').get(0).id に等しい document.getElementById('test').id

このスレッドを見つけた他の人に役立つかもしれません。以下のコードは、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();

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

上記のコードを使用すると、IDを取得できます。

これは古い質問ですが、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!

idは属性なので、attrメソッドを使用して取得できます。

これは要素id、クラス、または自動的に

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

重要：あなたはjQueryを使って新しいオブジェクトを作成し、イベントを結合している場合、あなたはしなければならない使用小道具やないのattr、このように：

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

これは最終的にあなたの問題を解決します：

ページに多くのボタンがあり、それらの1つを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から取得され、変更されました。

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

OPには応答しませんが、他のユーザーには興味深いかもしれません。.idこの場合はフィールドにアクセスできます。

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