JQuery kullanarak bir öğenin kimliğini nasıl alabilirim?

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

Yukarıdaki neden işe yaramıyor ve bunu nasıl yapmalıyım?

JQuery yolu:

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

Örneğinizde:

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

Veya DOM aracılığıyla:

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

ya da :

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

ve $('#test').get(0)JQuery veya hatta kullanımının ardındaki neden $('#test')[0], bu $('#test')bir JQuery seçici ve varsayılan işlevselliği ile tek bir öğe değil bir sonuç dizisi () döndürür

jquery'de DOM seçici için bir alternatif

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

Belirtilen DOM özelliğinden farklı .attr()ve $('#test').prop('foo')belirtilen DOM fooözelliğini alırken $('#test').attr('foo'), belirtilen HTML fooözelliğini alır ve farklılıklar hakkında daha fazla bilgiyi burada bulabilirsiniz .

$('selector').attr('id')ilk eşleşen öğenin kimliğini döndürür. Referans .

Eşleşen kümeniz birden fazla öğe içeriyorsa , id'lerin her birini içeren bir dizi döndürmek için geleneksel .each yineleyiciyi kullanabilirsiniz :

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

Ya da, biraz daha grittier almaya istekliyseniz, sarıcıdan kaçınabilir ve .map kısayolu kullanabilirsiniz .

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

idbir html özelliğidir Element. Ancak, yazdığınızda $("#something"), eşleşen DOM öğelerini saran bir jQuery nesnesi döndürür. İlk eşleşen DOM öğesini geri almak için arayınget(0)

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

Bu yerel öğede, kimliği veya başka bir yerel DOM mülkünü veya işlevini çağırabilirsiniz.

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

Bu yüzden idkodunuzda çalışmaz.

Alternatif olarak, attrdiğer yanıtların idilk eşleşen öğenin niteliğini almasını önerdiği gibi jQuery'nin yöntemini kullanın .

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

Yukarıdaki cevaplar harika, ama jquery geliştikçe .. ayrıca şunları da yapabilirsiniz:

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

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

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

Bazı kontrol kodları elbette gerekli, ancak kolayca uygulanabilir!

.idgeçerli bir jquery işlevi değil. .attr()Bir öğenin sahip olduğu özelliklere erişmek için işlevi kullanmanız gerekir . Sen kullanabilirsiniz .attr()iki parametreyi belirterek hem değişime özellik değeri veya birini belirterek değeri olsun.

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

Bir öğenin kimliğini almak istiyorsanız, diyelim ki bir sınıf seçicisi tarafından, belirli bir öğede bir olay (bu durumda click olayı) tetiklendiğinde, aşağıdakiler işi yapacaktır:

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

$('#test').attr('id') Örneğinizde:

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

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

Görünüşe göre bir çözüm yok ve JQuery prototiplerinin genişlemesi olan kendi çözümümü önermek istiyorum. Bunu JQuery kitaplığından sonra yüklenen bir Yardımcı dosyaya koydum,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');
        }
    }
}

Mükemmel olmayabilir ama belki de JQuery kütüphanesine dahil olmaya başlayabilir.

Tek bir dize değeri veya dize değerleri dizisi döndürür. Dize değerleri dizisi, çok öğeli bir seçicinin kullanıldığı olay içindir.

$('#test')döner bir jQuery nesnesi, sadece kullanamaması için object.idalmak için onunId

kullanmanız gerekir $('#test').attr('id'), bu da gerekli IDöğeyi döndürür

Bu ayrıca aşağıdaki gibi yapılabilir,

$('#test').get(0).id bu eşittir document.getElementById('test').id

Bu konuyu bulan başkaları için de yararlı olabilir. Aşağıdaki kod yalnızca zaten jQuery kullanıyorsanız çalışır. İşlev her zaman bir tanımlayıcı döndürür. Öğenin bir tanımlayıcısı yoksa, işlev tanımlayıcıyı oluşturur ve bunu öğeye ekler.

var generatedIdCounter = 0;

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

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

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

    return identifier;
}

Nasıl kullanılır:

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

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

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

Yukarıdaki kodu kullanarak id alabilirsiniz.

Bu eski bir soru, ancak 2015 itibariyle bu gerçekten işe yarayabilir:

$('#test').id;

Ayrıca atamalar da yapabilirsiniz:

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

Aşağıdaki JQuery eklentisini tanımladığınız sürece:

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

İlginçtir, elementbir DOM öğesi ise, o zaman:

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

Yana kimliği bir niteliktir, sen kullanarak alabilirsiniz attryöntem.

Bu öğe kimliği, sınıf veya çift kullanarak otomatik olabilir

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

Önemli: jQuery ile yeni bir nesne oluşturup bir olay bağlayıcı varsa, GEREKİR kullanmak prop değil attr , örneğin:

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

Bu sonunda sorunlarınızı çözecektir:

bir sayfada çok sayıda düğmeniz olduğunu ve bunlardan birini kimliğine bağlı olarak jQuery Ajax (veya ajax değil) ile değiştirmek istediğinizi varsayalım.

ayrıca birçok farklı düğme türünüzün (formlar, onay ve benzeri amaçlar için) olduğunu ve jQuery'nin yalnızca "like" düğmelerini işlemesini istediğinizi varsayalım.

İşte çalışan bir kod: jQuery yalnızca .cls-hlpb sınıfındaki düğmeleri ele alır, tıklatılan düğmenin kimliğini alır ve ajax'tan gelen verilere göre değiştirir.

<!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 kodunu aldı ve değiştirildi.

<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'ye cevap vermez, ancak başkaları için ilginç olabilir: .idbu durumda alana erişebilirsiniz :

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