Wie kann ich die ID eines Elements mit jQuery abrufen?

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

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

Angst vor einem Hackplaneten
quelle
5
Abrufen der ID eines Elements, das über seine ID ausgewählt wurde? oO
Martin Schneider
Beispielcode. Ich arbeite an einem Ereignisauslöser, der "dies" verwendet, und ich muss wissen, was das Ereignis ausgelöst hat, und unabhängig verfolgen, wie oft jedes Element ausgelöst wird. Das Erstellen einer Stichprobe mit "this" ist viel zu groß.
Nelson

Antworten:

2303

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 .

Instanz von mir
quelle
234
Es wundert mich jedes Mal, dass jQuery keine Abkürzung dafür hat $('#test').id().
Ehrfurcht
5
Es wäre selten nützlich, da IDs normalerweise in HTML und JS fest codiert sind. Wenn Sie JS schreiben, kennen Sie bereits die ID eines Elements. Schreiben Sie diese ID, um das Element abzurufen. Sie müssen die ID eines Elements selten programmgesteuert abrufen.
Daniel1426
10
Machen Sie das 164969 mal. Und jetzt bin ich hier. Ich habe Code, der Formulare initialisiert. Einige der Formulare haben spezielle Anforderungen. Ich könnte nach bestimmten Formularelementen suchen, um zu entscheiden, was zu tun ist, aber ich denke, die Identifizierung des Formulars - also die ID des Formulars - ist der logischste und sicherste Weg.
Slashback
50
Warum sollte ich die ID eines Elements erhalten müssen? Weil ich einen Ereignishandler an eine Klasse von Elementen angehängt habe und wissen muss, welches Element das Ereignis ausgelöst hat. Ich hoffe ich mache das richtig.
Buttle Butkus
4
Opps .. machen das 1.122.603 mal ..: P
BvuRVKyUVlViVIc7
85

$('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})
Steven
quelle
9
Übrigens, ich denke retval.push($(this).attr('id'))kann geschrieben werdenretval.push(this.id)
Darren Cook
Wenn Sie ein Attribut von HMTL5-Daten benötigen - **, verwenden Sie Folgendes: return $('.selector').map(function(i, dom){ return $(dom).attr('data-id'); })
Widerrufen Sie den
Die .selector-Eigenschaft wurde in jQuery 1.7 nicht mehr unterstützt und wird nur in dem Umfang beibehalten, der für die Unterstützung von .live () im jQuery Migrate-Plugin erforderlich ist. Die Eigenschaft war niemals ein zuverlässiger Indikator für den Selektor, mit dem die Menge der Elemente abgerufen werden konnte, die derzeit in der jQuery-Menge enthalten sind, in der es sich um eine Eigenschaft handelte, da nachfolgende Durchquerungsmethoden die Menge möglicherweise geändert haben.
Andrew Day
40

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")
Anurag
quelle
25

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

var myId = $("#test").prop("id");
Chris
quelle
4
@cjbarth attr()wurde in 1.0 und prop()in 1.6 hinzugefügt, daher gehe ich davon aus, dass Ihr Kommentar prop()der neue Weg ist.
Erik Philips
3
@ErikPhilips Ich glaube, dass es nicht auf alte und neue Weise, sondern auf die ursprüngliche Ausgabe ankommt, wenn die Seite geladen wird ( attr) oder möglicherweise durch script ( prop) geändert wird . Wenn Sie das idAttribut eines Elements nicht mithilfe eines clientseitigen Skripts ändern, sind propund attridentisch.
AntonChanning
23
$.fn.extend({
    id : function() {
        return this.attr('id');
    }
});

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

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

stat
quelle
9

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

Joey C.
quelle
7

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');
 });
Jay Query
quelle
6

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

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

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

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.

Goldbischof
quelle
4

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


quelle
1
.. und auch $('#test')[0].iddas ist das gleiche wie.get(0)
Gabriele Petrioli
3

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();
Tommy
quelle
2
$('tagname').attr('id');

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

Jaymin
quelle
2

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!
MarcG
quelle
2

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

Oussidi Mohamed
quelle
0

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');
=========================
Daniel Adenew
quelle
-1

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

Camila S.
quelle
-1

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.

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

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)
Mariotomo
quelle
1
Ich bin Downvotern dankbar, wenn sie erklären, was in meinem Verständnis falsch ist. ansonsten finde ich sie so interessant wie eine Mücke.
Mariotomo