Bagaimana saya bisa mendapatkan ID suatu elemen menggunakan jQuery?

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

Mengapa cara di atas tidak berhasil, dan bagaimana saya harus melakukan ini?

Cara jQuery:

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

Dalam contoh Anda:

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

Atau melalui DOM:

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

atau bahkan :

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

dan alasan di balik penggunaan $('#test').get(0)dalam JQuery atau bahkan $('#test')[0]adalah itu $('#test')adalah pemilih JQuery dan mengembalikan array () hasil bukan elemen tunggal dengan fungsi defaultnya

alternatif untuk pemilih DOM di jquery adalah

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

yang berbeda dari .attr()dan $('#test').prop('foo')meraih fooproperti DOM yang ditentukan , sementara $('#test').attr('foo')mengambil fooatribut HTML yang ditentukan dan Anda dapat menemukan detail lebih lanjut tentang perbedaan di sini .

$('selector').attr('id')akan mengembalikan id dari elemen yang cocok pertama. Referensi .

Jika set yang cocok Anda mengandung lebih dari satu elemen, Anda dapat menggunakan .each iterator konvensional untuk mengembalikan array yang berisi setiap id:

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

Atau, jika Anda ingin sedikit lebih grittier, Anda dapat menghindari pembungkus dan menggunakan .map pintasan .

return $('.selector').map(function(index,dom){return dom.id})

idadalah properti dari html Element. Namun, saat Anda menulis $("#something"), ia mengembalikan objek jQuery yang membungkus elemen DOM yang cocok. Untuk mendapatkan elemen DOM yang cocok pertama kembali, hubungiget(0)

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

Pada elemen asli ini, Anda dapat memanggil id, atau properti atau fungsi DOM asli lainnya.

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

Itulah alasan mengapa idtidak bekerja dalam kode Anda.

Atau, gunakan attrmetode jQuery sebagai jawaban lain menyarankan untuk mendapatkan idatribut elemen pencocokan pertama.

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

Jawaban di atas memang bagus, tetapi seiring perkembangan jquery .. sehingga Anda juga dapat melakukannya:

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

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

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

Beberapa kode pemeriksaan diperlukan tentu saja, tetapi mudah diimplementasikan!

.idbukan fungsi jquery yang valid. Anda perlu menggunakan .attr()fungsi untuk mengakses atribut yang dimiliki elemen. Anda dapat menggunakan .attr()keduanya untuk mengubah nilai atribut dengan menentukan dua parameter, atau mendapatkan nilai dengan menentukan satu parameter.

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

Jika Anda ingin mendapatkan ID suatu elemen, katakanlah oleh pemilih kelas, ketika suatu peristiwa (dalam hal ini peristiwa klik) dipecat pada elemen tertentu, maka hal berikut akan melakukan pekerjaan:

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

$('#test').attr('id') Dalam contoh Anda:

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

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

Yah, sepertinya belum ada solusi dan ingin mengusulkan solusi saya sendiri yang merupakan perluasan dari prototipe JQuery. Saya menempatkan ini dalam file Helper yang dimuat setelah perpustakaan JQuery, maka cek untukwindow.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');
        }
    }
}

Ini mungkin tidak sempurna tetapi ini adalah awal untuk mungkin mendapatkan inklusi ke perpustakaan JQuery.

Mengembalikan nilai string tunggal atau Array nilai string. Array nilai string, adalah untuk acara selektor multi-elemen digunakan.

$('#test')mengembalikan objek jQuery, jadi Anda tidak bisa menggunakan hanya object.iduntuk mendapatkannyaId

Anda perlu menggunakan $('#test').attr('id'), yang mengembalikan IDelemen yang Anda butuhkan

Ini juga dapat dilakukan sebagai berikut,

$('#test').get(0).id yang sama dengan document.getElementById('test').id

Mungkin bermanfaat untuk orang lain yang menemukan utas ini. Kode di bawah ini hanya akan berfungsi jika Anda sudah menggunakan jQuery. Fungsi mengembalikan selalu pengidentifikasi. Jika elemen tidak memiliki pengidentifikasi, fungsi menghasilkan pengidentifikasi dan menambahkan ini ke elemen.

var generatedIdCounter = 0;

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

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

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

    return identifier;
}

Cara Penggunaan:

$('.classname').id();

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

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

Dengan menggunakan kode di atas Anda bisa mendapatkan id.

Ini adalah pertanyaan lama, tetapi pada 2015 ini mungkin benar-benar berfungsi:

$('#test').id;

Dan Anda juga dapat membuat tugas:

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

Selama Anda mendefinisikan plugin JQuery berikut:

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

Menariknya, jika elementmerupakan elemen DOM, maka:

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

Karena id adalah atribut, Anda bisa mendapatkannya dengan menggunakan attrmetode ini.

Ini bisa id elemen, kelas, atau secara otomatis menggunakan genap

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

Penting: jika Anda membuat objek baru dengan jQuery dan mengikat acara, Anda HARUS menggunakan prop dan bukan attr , seperti ini:

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

Ini akhirnya akan menyelesaikan masalah Anda:

katakanlah Anda memiliki banyak tombol pada halaman dan Anda ingin mengubahnya dengan jQuery Ajax (atau tidak ajax) tergantung pada ID mereka.

katakan juga bahwa Anda memiliki banyak jenis tombol (untuk formulir, untuk persetujuan dan untuk tujuan sejenis), dan Anda ingin jQuery hanya memperlakukan tombol "suka".

di sini adalah kode yang berfungsi: jQuery hanya akan memperlakukan tombol-tombol yang berkelas .cls-hlpb, ia akan mengambil id dari tombol yang diklik dan akan mengubahnya sesuai dengan data yang berasal dari 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>

kode diambil dari w3schools dan diubah.

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

itu tidak menjawab OP, tetapi mungkin menarik bagi orang lain: Anda dapat mengakses .idbidang dalam kasus ini:

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