it-swarm.com.de

Wie kann ich die ID eines Elements mit jQuery ermitteln?

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

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

1297

Der jQuery-Weg:

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

In deinem Beispiel:

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

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

Oder über 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') ein JQuery-Selektor ist und ein Array () von Ergebnissen zurückgibt kein einzelnes Element durch seine Standardfunktionalität

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

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

dies unterscheidet sich von .attr() und $('#test').prop('foo') und erfasst die angegebene DOM-Eigenschaft foo, während $('#test').attr('foo') das angegebene HTML-Attribut foo erfasst und Sie weitere Details zu Unterschieden finden können hier .

2120
instanceof me

$('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 den herkömmlichen .eachIterator verwenden, 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 bisschen grobkörniger zu werden, können Sie den Wrapper umgehen und den .mapAbkürzung verwenden.

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

id ist eine Eigenschaft von html Element. Wenn Sie jedoch $("#something") schreiben, wird ein jQuery-Objekt zurückgegeben, das die übereinstimmenden DOM-Elemente umschließt. Rufen Sie get(0) auf, um das erste übereinstimmende DOM-Element zurückzugewinnen.

$("#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 id in Ihrem Code nicht funktioniert.

Alternativ können Sie die Methode attr von jQuery verwenden, da andere Antworten darauf hindeuten, das Attribut id des ersten übereinstimmenden Elements abzurufen.

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

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

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

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

Ein paar Überprüfungscodes sind natürlich erforderlich, aber leicht zu implementieren!

23
stat

.id ist keine gültige Abfragefunktion. Sie müssen die Funktion .attr() verwenden, um auf Attribute zuzugreifen, die ein Element besitzt. Sie können .attr() verwenden, um einen Attributwert durch Angabe von zwei Parametern zu ändern oder den Wert durch Angabe eines Parameters abzurufen.

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

10
Joey C.

Wenn Sie eine ID eines Elements erhalten möchten, z. B. durch einen Klassenselektor, wenn ein Ereignis (in diesem Fall ein Klickereignis) für dieses bestimmte Element ausgelöst wurde, erledigt Folgendes die Aufgabe:

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

Nun, anscheinend gab es keine Lösung und ich würde gerne meine eigene Lösung vorschlagen, die eine Erweiterung des JQuery-Prototyps darstellt. Ich habe dies in eine Hilfedatei geschrieben, die nach der JQuery-Bibliothek geladen wird, daher die Prüfung auf 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, um vielleicht in die JQuery-Bibliothek aufgenommen zu werden.

Gibt entweder einen einzelnen Zeichenfolgewert oder ein Array von Zeichenfolgewerten zurück. Das Array von Zeichenfolgenwerten ist das Ereignis, für das ein Selektor mit mehreren Elementen verwendet wurde.

6
GoldBishop

$('#test') gibt ein jQuery-Objekt zurück, sodass Sie nicht einfach object.id verwenden können, um dessen Id zu erhalten.

sie müssen $('#test').attr('id') verwenden, das Ihr gewünschtes ID des Elements zurückgibt

Dies kann auch folgendermaßen geschehen:

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

5
user372551

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

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

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

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();
4
Tommy

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

$('#test').id;

Und Sie können auch Aufträge vergeben:

$('#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 gilt Folgendes, wenn element ein DOM-Element ist:

element.id === $(element).id; // Is true!
3
MarcG
$('tagname').attr('id');

Mit dem obigen Code können Sie ID erhalten.

3
Jaymin

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');
=========================
1
danielad
<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));
    }
}
?>
0
Himani

Dies wird endlich Ihre Probleme lösen:

nehmen wir an, Sie haben viele Schaltflächen auf einer Seite und möchten eine davon mit jQuery Ajax (oder ohne Ajax) abhängig von ihrer ID ä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, nimmt die ID der angeklickten Schaltfläche und ändert sie entsprechend den Daten aus dem Ajax.

<!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 von w3schools übernommen und geändert.

0
user3495363

Da id ein Attribut ist, können Sie es mit der attr -Methode abrufen.

0
Oussidi Mohamed

Wichtig: Wenn Sie mit jQuery ein neues Objekt erstellen und ein Ereignis binden, müssen Sie MUST prop und nicht attr , wie folgt:

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

0
Camila S.

es antwortet nicht auf das OP, kann aber für andere interessant sein: In diesem Fall können Sie auf das Feld .id zugreifen:

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