Frage Wie kann ich die ID eines Elements mit jQuery erhalten?


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

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


1106
2017-07-13 17:11


Ursprung


Antworten:


Der jQuery-Weg:

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

In Ihrem Beispiel:

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

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

Oder durch das DOM:

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

oder auch :

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

und Grund hinter der Verwendung von $('#test').get(0) in JQuery oder sogar $('#test')[0] ist das $('#test') ist ein JQuery-Selektor und Gibt ein Array () von Ergebnissen zurück kein einzelnes Element durch seine Standardfunktionalität

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

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

was ist anders als .attr() und $('#test').prop('foo') ergreift das angegebene DOM foo Eigentum, während $('#test').attr('foo') ergreift den angegebenen HTML-Code foo Attribut und Sie können mehr Details über Unterschiede finden Hier.


1810
2017-07-13 17:12



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

Wenn Ihr übereinstimmendes Set mehr als ein Element enthält, können Sie das konventionelle Element verwenden .each  Iterator um ein Array zurückzugeben, das jede der IDs enthält:

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

Oder, wenn Sie bereit sind, ein wenig kerniger zu werden, können Sie den Wrapper vermeiden und das verwenden .map  Abkürzung.

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

70
2017-07-13 17:13



id ist eine Eigenschaft eines HTML Element. Wie auch immer, wenn du schreibst $("#something")Es wird ein jQuery-Objekt zurückgegeben, das die übereinstimmenden DOM-Elemente umschließt. Rufen Sie auf, um das erste übereinstimmende DOM-Element zurück zu erhalten get(0)

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

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

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

Das ist der Grund, warum id funktioniert nicht in deinem Code.

Alternativ verwenden Sie jQuery's attr Methode wie andere Antworten vorschlagen, um das zu bekommen id Attribut des ersten übereinstimmenden Elements.

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

37
2017-07-13 17:16



Die obigen Antworten sind großartig, aber so wie sich jquery entwickelt .. so können Sie auch Folgendes tun:

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

24
2017-12-05 16:46



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

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

Einige Prüfcodes sind natürlich erforderlich, aber leicht zu implementieren!


20
2017-09-25 13:15



.id ist keine gültige jquery-Funktion. Sie müssen das verwenden .attr() Funktion zum Zugriff auf Attribute, die ein Element besitzt. Sie können verwenden .attr() Ändern Sie entweder einen Attributwert, indem Sie zwei Parameter angeben, oder ermitteln Sie den Wert, indem Sie einen Wert angeben.

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


10
2017-07-13 17:17



Wenn Sie eine ID eines Elements erhalten möchten, zum Beispiel durch einen Klassenselektor, wenn ein Ereignis (in diesem Fall ein Klick-Ereignis) für dieses spezifische Element ausgelöst wurde, dann wird Folgendes ausgeführt:

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

7
2018-05-29 10:35



$('#test') Gibt ein jQuery-Objekt zurück, das Sie nicht einfach verwenden können object.id um es zu bekommen Id

Sie müssen verwenden $('#test').attr('id'), die Ihre erforderliche zurückgibt ID des Elements

Dies kann auch folgendermaßen geschehen,

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


5
2017-07-13 17:16



Vielleicht nützlich für andere, die diesen Thread finden. Der folgende Code funktioniert nur, wenn Sie bereits jQuery 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();

3
2018-02-17 10:18



Nun, scheint es gab keine Lösung und würde gerne meine eigene Lösung vorschlagen, die eine Erweiterung des JQuery-Prototyps ist. Ich lege das in eine Hilfsdatei, die nach der JQuery-Bibliothek geladen wird, daher die Prüfung für 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');
        }
    }
}

Es ist vielleicht nicht perfekt, aber es ist ein Anfang, vielleicht Aufnahme in die JQuery-Bibliothek zu bekommen.

Gibt entweder einen einzelnen Zeichenfolgenwert oder ein Array mit Zeichenfolgenwerten zurück. Das Array von String-Werten ist für das Ereignis, dass ein Selector mit mehreren Elementen verwendet wurde.


3
2018-02-09 18:27



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

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

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

3
2018-03-27 09:46