Bagaimana saya bisa mendapatkan ID suatu elemen menggunakan jQuery?


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

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


5
Dapatkan ID elemen yang telah dipilih melalui ID-nya? oO
Martin Schneider

Kode sampel. Saya sedang mengerjakan pemicu acara yang menggunakan "ini" dan saya perlu tahu apa yang memicu acara, dan secara mandiri melacak berapa kali setiap elemen dipicu. Membangun sampel dengan "ini" akan terlalu besar.
Nelson

Jawaban:


2303

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 .


234
Saya kagum setiap kali jQuery tidak memiliki jalan pintas seperti ini $('#test').id().
awe

5
Ini akan jarang berguna karena id biasanya dikodekan ke dalam HTML dan JS. Saat Anda menulis JS, Anda sudah tahu ID beberapa elemen, jadi Anda menulis ID itu untuk mengambil elemen tersebut. Anda jarang perlu mendapatkan ID suatu elemen secara terprogram.
daniel1426

10
Lakukan sebanyak 164969 kali. Plus sekarang saya di sini. Saya memiliki kode yang menginisialisasi formulir. Beberapa formulir memiliki persyaratan khusus. Saya bisa mencari elemen form tertentu untuk memutuskan apa yang harus dilakukan, tetapi saya pikir mengidentifikasi form - dengan demikian id form - adalah cara yang paling logis dan pasti.
Slashback

50
Mengapa saya perlu mendapatkan id elemen? Karena saya memiliki pengendali event yang melekat pada kelas elemen, dan saya perlu tahu elemen mana yang memicu event tersebut. Saya harap saya melakukan ini dengan benar.
Buttle Butkus

4
Opps .. buat sebanyak 1.122.603 kali ..: P
BvuRVKyUVlViVIc7

85

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

9
BTW, saya pikir retval.push($(this).attr('id'))bisa ditulisretval.push(this.id)
Darren Cook

Jika Anda memerlukan atribut data HMTL5 - ** maka gunakan sesuatu seperti ini: return $('.selector').map(function(i, dom){ return $(dom).attr('data-id'); })
cabut

Properti .selector sudah tidak digunakan lagi di jQuery 1.7 dan hanya dipertahankan sejauh yang diperlukan untuk mendukung .live () di plugin jQuery Migrate. Properti itu tidak pernah menjadi indikator pemilih yang dapat diandalkan yang dapat digunakan untuk mendapatkan set elemen yang saat ini terkandung dalam set jQuery di mana itu adalah properti, karena metode traversal berikutnya mungkin telah mengubah set.
Hari Andrew

40

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")

25

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

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

4
@cjbarth attr()ditambahkan pada 1.0, dan prop()ditambahkan pada 1.6, jadi saya anggap komentar Anda prop()adalah cara baru.
Erik Philips

3
@ ErikPhilips Saya percaya, daripada cara lama dan cara baru, itu tergantung apakah Anda tertarik pada output asli ketika halaman dimuat ( attr) atau yang berpotensi dimodifikasi oleh skrip ( prop). Jika Anda tidak benar-benar memodifikasi idatribut elemen apa pun menggunakan skrip sisi klien, maka propdan attritu identik.
AntonChanning

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

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

Beberapa kode pemeriksaan diperlukan tentu saja, tetapi mudah diimplementasikan!


9

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


7

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

6

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

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

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

5

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.


4

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


1
.. dan juga $('#test')[0].idyang sama dengan.get(0)
Gabriele Petrioli

3

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

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

Dengan menggunakan kode di atas Anda bisa mendapatkan id.


2

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!

2

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


0

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

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

-1

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");


-1

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.


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

-1

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

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

1
Saya berterima kasih kepada para pemilih saat mereka menjelaskan apa yang salah dalam pemahaman saya. kalau tidak, saya menemukan mereka semenarik nyamuk.
mariotomo
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.