Wie kann ich die ID eines Elements mit jQuery abrufen?

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

Warum funktioniert das oben nicht und wie soll ich das machen?

Der jQuery-Weg:

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

In Ihrem Beispiel:

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

Oder durch das DOM:

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

oder auch :

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

und Grund für die Verwendung von $('#test').get(0)in JQuery oder sogar $('#test')[0]ist, dass $('#test')es sich um einen JQuery-Selektor handelt, der ein Array () von Ergebnissen zurückgibt, das standardmäßig kein einzelnes Element ist

Eine Alternative für den DOM-Selektor in jquery ist

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

das unterscheidet sich von .attr()und $('#test').prop('foo')packt den angegebenen DOM - fooEigenschaft, während $('#test').attr('foo')Zupacken das angegebene HTML - fooAttribut und Sie genauere Informationen über Unterschiede finden sich hier .

$('selector').attr('id')gibt die ID des ersten übereinstimmenden Elements zurück. Referenz .

Wenn Ihre übereinstimmende Menge mehr als ein Element enthält, können Sie mit dem herkömmlichen .each Iterator ein Array zurückgeben, das jede der IDs enthält:

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

Wenn Sie bereit sind, etwas grobkörniger zu werden, können Sie den Wrapper vermeiden und die .map Verknüpfung verwenden .

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

idist eine Eigenschaft eines HTML Element. Beim Schreiben $("#something")wird jedoch ein jQuery-Objekt zurückgegeben, das die übereinstimmenden DOM-Elemente umschließt. Rufen Sie auf, um das erste übereinstimmende DOM-Element zurückzugewinnenget(0)

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

In diesem nativen Element können Sie id oder eine andere native DOM-Eigenschaft oder -Funktion aufrufen.

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

Das ist der Grund, warum idin Ihrem Code nicht funktioniert.

Verwenden Sie alternativ die attrMethode von jQuery, wie andere Antworten vorschlagen, um das idAttribut des ersten übereinstimmenden Elements abzurufen.

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

Die obigen Antworten sind großartig, aber wenn sich jquery weiterentwickelt, können Sie auch Folgendes tun:

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

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

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

Einige Überprüfungscodes sind natürlich erforderlich, aber einfach zu implementieren!

.idist keine gültige Abfragefunktion. Sie müssen die .attr()Funktion verwenden, um auf Attribute zuzugreifen, die ein Element besitzt. Sie können .attr()sowohl einen Attributwert durch Angabe von zwei Parametern ändern als auch den Wert durch Angabe eines Parameters abrufen.

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

Wenn Sie eine ID eines Elements erhalten möchten, z. B. durch eine Klassenauswahl, wenn ein Ereignis (in diesem Fall ein Klickereignis) für dieses bestimmte Element ausgelöst wurde, wird Folgendes ausgeführt:

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

$('#test').attr('id') In Ihrem Beispiel:

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

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

Nun, anscheinend gab es keine Lösung und ich möchte meine eigene Lösung vorschlagen, die eine Erweiterung des JQuery-Prototyps ist. Ich habe dies in eine Hilfsdatei eingefügt, die nach der JQuery-Bibliothek geladen wird, daher die Prüfung aufwindow.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');
        }
    }
}

Es mag nicht perfekt sein, aber es ist ein Anfang, um vielleicht in die JQuery-Bibliothek aufgenommen zu werden.

Gibt entweder einen einzelnen Zeichenfolgenwert oder ein Array von Zeichenfolgenwerten zurück. Das Array der Zeichenfolgenwerte ist für den Fall, dass ein Selektor mit mehreren Elementen verwendet wurde.

$('#test')Gibt ein jQuery-Objekt zurück, sodass Sie es nicht einfach object.idzum Abrufen verwenden könnenId

Sie müssen verwenden $('#test').attr('id'), was Ihre Anforderungen an IDdas Element zurückgibt

Dies kann auch wie folgt erfolgen:

$('#test').get(0).id das ist gleich document.getElementById('test').id

Vielleicht nützlich für andere, die diesen Thread finden. Der folgende Code funktioniert nur, wenn Sie jQuery bereits verwenden. Die Funktion gibt immer einen Bezeichner zurück. Wenn das Element keinen Bezeichner hat, generiert die Funktion den Bezeichner und hängt diesen an das Element an.

var generatedIdCounter = 0;

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

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

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

    return identifier;
}

Wie benutzt man:

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

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

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

Mit dem obigen Code können Sie eine ID erhalten.

Dies ist eine alte Frage, aber ab 2015 könnte dies tatsächlich funktionieren:

$('#test').id;

Und Sie können auch Aufgaben vornehmen:

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

Solange Sie das folgende JQuery-Plugin definieren:

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

Interessanterweise, wenn elementes sich um ein DOM-Element handelt, dann:

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

Da die ID ein Attribut ist, können Sie sie mithilfe der attrMethode abrufen.

Dies kann eine Element-ID, eine Klasse oder die automatische Verwendung von Even sein

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

Wichtig: Wenn Sie ein neues Objekt mit jQuery und Bindung ein Ereignis erstellen, können Sie MÜSSEN verwenden Stütze und nicht attr , wie folgt aus :

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

Dies wird endlich Ihre Probleme lösen:

Angenommen, Sie haben viele Schaltflächen auf einer Seite und möchten eine davon je nach ID mit jQuery Ajax (oder nicht Ajax) ändern.

Angenommen, Sie haben viele verschiedene Arten von Schaltflächen (für Formulare, zur Genehmigung und für ähnliche Zwecke), und Sie möchten, dass die jQuery nur die Schaltflächen "Gefällt mir" behandelt.

Hier ist ein Code, der funktioniert: Die jQuery behandelt nur die Schaltflächen der Klasse .cls-hlpb. Sie nimmt die ID der Schaltfläche, auf die geklickt wurde, und ändert sie entsprechend den Daten, die vom Ajax stammen.

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

Code wurde aus w3schools genommen und geändert.

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

Es beantwortet das OP nicht, kann aber für andere interessant sein: .idIn diesem Fall können Sie auf das Feld zugreifen :

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