Bagaimana saya bisa mendapatkan ID dari elemen menggunakan jQuery?

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

Mengapa doesn't di atas bekerja, dan bagaimana saya harus melakukan ini?

Mengomentari pertanyaan (1)
Larutan

JQuery cara:

$('#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 $(&#39;#tes&#39;).get(0) di JQuery atau bahkan $(&#39;#tes&#39;)[0] adalah bahwa $(&#39;#tes&#39;) adalah JQuery selector dan mengembalikan array() dari hasil tidak satu elemen dengan fungsi default

alternatif untuk DOM selector di jquery

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

yang berbeda dari .attr() dan $(&#39;#tes&#39;).prop(&#39;foo&#39;) meraih ditentukan DOM foo properti, sementara $(&#39;#tes&#39;).attr(&#39;foo&#39;) meraih ditentukan HTML foo atribut dan anda dapat menemukan rincian lebih lanjut tentang perbedaan di sini.

Komentar (20)

$(&#39;pemilih&#39;).attr(&#39;id&#39;) akan kembali id pertama dicocokkan elemen. Referensi.

Jika anda cocok set berisi lebih dari satu elemen, anda dapat menggunakan konvensional .masing-masing iterator untuk mengembalikan array yang berisi masing-masing id:

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

Atau, jika anda're bersedia untuk mendapatkan sedikit lebih bertekad, anda dapat menghindari wrapper dan gunakan .peta shortcut.

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

id adalah properti dari sebuah html Elemen. Namun, ketika anda menulis $("#sesuatu"), itu kembali objek jQuery yang membungkus pencocokan elemen DOM(s). Untuk mendapatkan yang pertama pencocokan elemen DOM kembali, panggilan get(0)

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

Pada elemen asli, anda dapat menghubungi id, atau lainnya asli DOM properti atau fungsi.

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

Yang's alasan mengapa id isn't bekerja dalam kode anda.

Atau, menggunakan jQuery's y metode sebagai jawaban yang lain menyarankan untuk mendapatkan id atribut dari elemen pertama yang cocok.

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

Atas jawaban yang bagus, tapi seperti jquery berkembang.. jadi anda juga dapat melakukan:

var myId = $("#test").prop("id");
Komentar (3)
$.fn.extend({
    id : function() {
        return this.attr('id');
    }
});

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

Beberapa pemeriksaan kode yang diperlukan tentu saja, tapi mudah dilaksanakan!

Komentar (1)

.id adalah tidak sah fungsi jquery. Anda perlu menggunakan .attr() fungsi untuk mengakses atribut suatu elemen yang memiliki. Anda dapat menggunakan .attr() untuk mengubah nilai atribut dengan menentukan dua parameter, atau mendapatkan nilai dengan menentukan satu.

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

Komentar (0)

Jika anda ingin mendapatkan ID dari sebuah elemen, let's mengatakan dengan class selector, ketika sebuah peristiwa (dalam hal ini klik event) yang dipecat pada elemen tertentu, maka berikut ini akan melakukan pekerjaan:

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

Nah, tampaknya belum ada solusi dan ingin mengusulkan saya sendiri solusi yang merupakan perluasan dari JQuery prototype's. Saya menempatkan ini dalam Pembantu file yang di-load setelah JQuery library, maka periksa jendela.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');
        }
    }
}

Mungkin tidak sempurna, tetapi itu adalah awal yang baik untuk mungkin mendapatkan dimasukkan ke dalam library JQuery.

Mengembalikan salah satu nilai string atau Array dari nilai-nilai string. Array dari string nilai-nilai, adalah untuk acara multi-elemen selector digunakan.

Komentar (0)

$(&#39;#tes&#39;) mengembalikan objek jQuery, sehingga anda dapat't gunakan hanya objek.id untuk mendapatkan Id

anda perlu menggunakan $(&#39;#tes&#39;).attr(&#39;id&#39;), yang mengembalikan anda diperlukan ID dari elemen

Hal ini juga dapat dilakukan sebagai berikut ,

$(&#39;#tes&#39;).get(0).id yang setara dengan dokumen.getElementById(&#39;test&#39;).id

Komentar (1)

$(&#39;#tes&#39;).attr(&#39;id&#39;) Dalam contoh anda:

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

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

Mungkin berguna bagi orang lain yang menemukan thread ini. Kode di bawah ini hanya akan bekerja jika anda sudah menggunakan jQuery. Fungsi kembali selalu pengenal. Jika elemen doesn't memiliki identifier yang berfungsi menghasilkan identifier 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;
}

Bagaimana untuk menggunakan:

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

$('#elementId').id();
Komentar (0)
$('tagname').attr('id');

Menggunakan kode di atas, anda bisa mendapatkan id.

Komentar (0)

Ini adalah pertanyaan lama, tapi pada tahun 2015 ini dapat benar-benar bekerja:

$('#test').id;

Dan anda juga dapat membuat tugas-tugas:

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

Selama anda tentukan berikut ini plugin JQuery:

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

Menariknya, jika elemen adalah elemen DOM, maka:

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

Ini bisa menjadi elemen id , class , atau secara otomatis menggunakan bahkan

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

Karena id adalah suatu atribut, anda bisa mendapatkannya dengan menggunakan y metode.

Komentar (0)

itu tidak menjawab OP, tapi mungkin menarik untuk orang lain: anda dapat mengakses .id lapangan dalam hal ini:

javascript $(&#39;#drop-insert&#39;).peta((i, o) => o.id)

Komentar (1)

Penting: jika anda membuat objek baru dengan jQuery dan mengikat suatu acara, anda *HARUS ** menggunakan prop dan y*, seperti ini:

$("<div/>",{ id: "yourId", kelas: "yourClass", html: "<span></span>" }).pada("klik", function(e) { alert($(this).prop("id")); }).appendTo("#sesuatu");

Komentar (0)

Ini akhirnya akan memecahkan masalah anda:

katakanlah anda memiliki banyak tombol pada halaman dan anda ingin mengubah salah satu dari mereka dengan jQuery Ajax (atau tidak ajax) tergantung pada ID mereka.

mari juga mengatakan bahwa anda memiliki banyak jenis yang berbeda dari tombol (untuk bentuk, untuk mendapatkan persetujuan dan untuk seperti tujuan), dan anda ingin jQuery untuk mengobati hanya "seperti" tombol.

berikut adalah kode yang bekerja: jQuery akan memperlakukan hanya tombol yang dari kelas .cls-hlpb, itu akan mengambil id dari tombol yang diklik dan akan berubah sesuai dengan data yang berasal dari ajax.





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



<input type="button" class="clshlpbtn" id="btnhlp-1" value="first btn">            
Komentar (0)



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

<?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>Delete
                </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));
    }
}
?>
Komentar (0)