Jak mogę uzyskać identyfikator elementu za pomocą jQuery?

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

Dlaczego powyższe nie działa i jak mam to zrobić?

Sposób jQuery:

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

W twoim przykładzie:

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

Lub poprzez DOM:

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

lub nawet :

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

a powodem użycia $('#test').get(0)JQuery lub nawet $('#test')[0]jest to, że $('#test')jest to selektor JQuery i zwraca tablicę () wyników, a nie pojedynczy element, dzięki swojej domyślnej funkcjonalności

alternatywą dla selektora DOM w jquery jest

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

który różni się .attr()i $('#test').prop('foo')pobiera określoną foowłaściwość DOM , podczas gdy $('#test').attr('foo')pobiera określony fooatrybut HTML i można znaleźć więcej szczegółów na temat różnic tutaj .

$('selector').attr('id')zwróci identyfikator pierwszego dopasowanego elementu. Odniesienia .

Jeśli dopasowany zestaw zawiera więcej niż jeden element, możesz użyć konwencjonalnego .each iteratora, aby zwrócić tablicę zawierającą każdy z identyfikatorów:

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

Lub, jeśli chcesz zrobić trochę bardziej grube, możesz uniknąć opakowania i użyć .map skrótu .

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

idjest własnością HTML Element. Jednak podczas pisania $("#something")zwraca obiekt jQuery, który otacza pasujące elementy DOM. Aby odzyskać pierwszy pasujący element DOM, zadzwońget(0)

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

W tym elemencie natywnym można wywołać identyfikator lub dowolną inną natywną właściwość lub funkcję DOM.

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

To jest powód, dlaczego idnie działa w twoim kodzie.

Alternatywnie użyj attrmetody jQuery, ponieważ inne odpowiedzi sugerują uzyskanie idatrybutu pierwszego pasującego elementu.

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

Powyższe odpowiedzi są świetne, ale w miarę ewolucji jquery .. możesz także:

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

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

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

Niektóre kody kontrolne są oczywiście wymagane, ale łatwe do wdrożenia!

.idnie jest prawidłową funkcją jquery. Musisz użyć tej .attr()funkcji, aby uzyskać dostęp do atrybutów posiadanych przez element. Możesz użyć .attr()obu, aby zmienić wartość atrybutu, określając dwa parametry lub uzyskać wartość, określając jeden.

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

Jeśli chcesz uzyskać identyfikator elementu, powiedzmy za pomocą selektora klasy, kiedy zdarzenie (w tym przypadku zdarzenie kliknięcia) zostało uruchomione na tym konkretnym elemencie, wówczas następujące zadanie wykona:

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

$('#test').attr('id') W twoim przykładzie:

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

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

Wygląda na to, że nie było rozwiązania i chciałbym zaproponować własne rozwiązanie, będące rozwinięciem prototypu JQuery. Umieszczam to w pliku pomocnika, który jest ładowany po bibliotece JQuery, stąd sprawdzaniewindow.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');
        }
    }
}

Może nie jest idealny, ale może być początkiem włączenia do biblioteki JQuery.

Zwraca wartość pojedynczego ciągu lub tablicę wartości ciągów. Tablica wartości ciągów, dla zdarzenia zastosowano selektor wieloelementowy.

$('#test') zwraca obiekt jQuery, więc nie można po prostu użyć object.id go pobraćId

musisz użyć $('#test').attr('id'), który zwraca wymaganeID wartość elementu

Można to również zrobić w następujący sposób,

$('#test').get(0).id co jest równe document.getElementById('test').id

Może przydatne dla innych, którzy znajdą ten wątek. Poniższy kod będzie działał tylko wtedy, gdy już używasz jQuery. Funkcja zawsze zwraca identyfikator. Jeśli element nie ma identyfikatora, funkcja generuje identyfikator i dołącza go do elementu.

var generatedIdCounter = 0;

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

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

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

    return identifier;
}

Jak używać:

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

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

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

Używając powyższego kodu możesz uzyskać id.

To stare pytanie, ale od 2015 r. Może faktycznie działać:

$('#test').id;

Możesz także wykonywać zadania:

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

Tak długo, jak zdefiniujesz następującą wtyczkę JQuery:

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

Co ciekawe, jeśli elementjest elementem DOM, to:

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

Ponieważ identyfikator jest atrybutem, możesz go uzyskać za pomocą attrmetody.

Może to być identyfikator elementu, klasa lub automatyczne użycie parzystości

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

Ważne: jeśli tworzysz nowy obiekt za pomocą jQuery i wiążesz zdarzenie, MUSISZ użyć prop, a nie attr , tak jak to:

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

To w końcu rozwiąże twoje problemy:

Powiedzmy, że masz wiele przycisków na stronie i chcesz zmienić jeden z nich za pomocą jQuery Ajax (lub nie ajax) w zależności od ich identyfikatora.

powiedzmy również, że masz wiele różnych typów przycisków (do formularzy, do zatwierdzenia i do podobnych celów) i chcesz, aby jQuery traktowało tylko przyciski „podobne”.

oto kod, który działa: jQuery będzie traktować tylko przyciski należące do klasy .cls-hlpb, pobierze identyfikator klikniętego przycisku i zmieni go zgodnie z danymi pochodzącymi z 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>

kod został pobrany z w3schools i zmieniony.

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

nie odpowiada OP, ale może być interesujący dla innych: .idw tym przypadku możesz uzyskać dostęp do pola:

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