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

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

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

Strachofawhackplanet
źródło
5
Uzyskiwanie identyfikatora elementu, który został wybrany za pomocą jego identyfikatora? oO
Martin Schneider
Przykładowy kod. Pracuję nad wyzwalaczem zdarzenia, który używa „tego” i muszę wiedzieć, co wywołało zdarzenie, i niezależnie śledzić, ile razy wyzwalany jest każdy element. Zbudowanie próbki za pomocą „tego” będzie zdecydowanie za duże.
Nelson

Odpowiedzi:

2303

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 .

instancja mnie
źródło
234
Dziwi mnie za każdym razem, gdy jQuery nie ma do tego skrótu $('#test').id().
awe
5
Byłoby to rzadko przydatne, ponieważ identyfikatory są zazwyczaj zakodowane na stałe w HTML i JS. Kiedy piszesz JS, znasz już identyfikator jakiegoś elementu, więc piszesz ten identyfikator, aby pobrać ten element. Rzadko potrzebujesz programowo uzyskać identyfikator elementu.
daniel1426
10
Zrób to 164969 razy. Plus teraz jestem tutaj. Mam kod inicjujący formularze. Niektóre formularze mają specjalne wymagania. I mógłby szukać elementów formularza specyficzne zdecydować, co robić, ale myślę identyfikacji formę - tym samym id formularza - jest najbardziej logiczne i murowany sposób.
Slashback
50
Dlaczego miałbym potrzebować identyfikatora elementu? Ponieważ mam moduł obsługi zdarzeń dołączony do klasy elementów i muszę wiedzieć, który konkretny element wywołał zdarzenie. Mam nadzieję, że robię to dobrze.
Buttle Butkus
4
Opps .. zrobić to 1 122 603 razy ..: P
BvuRVKyUVlViVIc7
85

$('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})
Steven
źródło
9
BTW, myślę, że retval.push($(this).attr('id'))można napisaćretval.push(this.id)
Darren Cook
Jeśli potrzebujesz atrybutu danych HMTL5 - **, użyj czegoś takiego: return $('.selector').map(function(i, dom){ return $(dom).attr('data-id'); })
odwołaj
Właściwość .selector została uznana za przestarzałą w jQuery 1.7 i jest utrzymywana tylko w zakresie potrzebnym do obsługi .live () we wtyczce jQuery Migrate. Właściwość nigdy nie była wiarygodnym wskaźnikiem selektora, którego można by użyć do uzyskania zestawu elementów znajdujących się obecnie w zestawie jQuery, w którym była to właściwość, ponieważ kolejne metody przejścia mogły go zmienić.
Andrew Day,
40

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")
Anurag
źródło
25

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

var myId = $("#test").prop("id");
Chris
źródło
4
@cjbarth attr()został dodany w wersji 1.0, a prop()został dodany w wersji 1.6, więc zakładam , że twój komentarz był prop()nowy.
Erik Philips
3
@ErikPhilips Wierzę, że zamiast starej i nowej drogi, zależy to od tego, czy interesuje Cię oryginalne wyjście po załadowaniu strony ( attr), czy potencjalnie zmodyfikowane przez skrypt ( prop). Jeśli nie są faktycznie modyfikując idatrybut każdego elementu za pomocą klienta skrypt bocznej, propi attrsą identyczne.
AntonChanning,
23
$.fn.extend({
    id : function() {
        return this.attr('id');
    }
});

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

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

stat
źródło
9

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

Joey C.
źródło
7

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');
 });
Jay Query
źródło
6

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

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

$(document).ready(function() {
    alert($('#test').attr('id'));
}); 
Kumar
źródło
5

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.

GoldBishop
źródło
4

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


źródło
1
.. a także $('#test')[0].idto samo co.get(0)
Gabriele Petrioli
3

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();
Tommy
źródło
2
$('tagname').attr('id');

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

Jaymin
źródło
2

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!
MarcG
źródło
2

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

Oussidi Mohamed
źródło
0

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');
=========================
Daniel Adenew
źródło
-1

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

Camila S.
źródło
-1

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.

użytkownik3495363
źródło
-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
źródło
-1

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)
mariotomo
źródło
1
Jestem wdzięczny downvotersom, którzy wyjaśniają, co jest nie tak w moim rozumieniu. w przeciwnym razie uważam je za tak interesujące jak komary.
mariotomo