Hoe kan ik de ID van een element krijgen met jQuery?

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

2, Autoriteit 4%

$('selector').attr('id')retourneert de ID van het eerste gematchte element. referentie .

Als uw afgestemde set meer dan één element bevat, kunt u de conventionele .eachiterator om een ​​array te retourneren met elk van de ID’s:

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

Of, als u bereid bent om een ​​beetje Grittier te krijgen, kunt u de wrapper vermijden en de .mapSnelkoppeling .

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

3, Autoriteit 2%

idis een eigenschap van een HTML element. Wanneer u echter $("#something")schrijft, retourneert het een jQuery-object dat het bijpassende DOM-element (en) wikkelt. Om het eerste bijpassende DOM-element terug te krijgen, bel dan get(0)

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

Op dit inheemse element kunt u een ID of een andere inheemse eigenschap of functie bellen.

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

Dat is de reden waarom idniet in uw code werkt.

Gebruik alternatief, gebruik JQuery’s attr-methode als andere antwoorden om de idkenmerk van het eerste overeenkomende element te krijgen.

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

4

Bovenstaande antwoorden zijn geweldig, maar zoals jQuery evolueert .. zodat u ook kunt doen:

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

5

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

Enkele controlecode vereist natuurlijk, maar gemakkelijk geïmplementeerd!

6

Als u een ID van een element wilt krijgen, laten we zeggen onder een klassenkiezer, wanneer een gebeurtenis (in dit geval klikt) is afgevuurd op dat specifieke element, dan zal het volgende de taak doen:

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

7

$('#test').attr('id')
In uw voorbeeld:

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

8

Nou, lijkt erop dat er geen oplossing is geweest en zou graag mijn eigen oplossing willen voorstellen die een uitbreiding van het jQuery-prototype is. Ik zet dit in een helperbestand dat is geladen na de jQuery-bibliotheek, vandaar de controle voor 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');
        }
    }
}

Het is misschien niet perfect, maar het is een begin om de inclusie te krijgen in de jQuery-bibliotheek.

Retourneert een enkele stringwaarde of een reeks stringwaarden. De reeks van stringwaarden, is voor het evenement een selector met meerdere elementen werd gebruikt.

9

$('#test')Retourneert een jQuery-object, dus u kunt niet eenvoudigweg object.idgebruiken om zijn idte krijgen

U moet $('#test').attr('id'), die uw vereiste idvan het element

retourneert

Dit kan ook als volgt worden gedaan,

$('#test').get(0).idwat gelijk is aan document.getElementById('test').id

Antwoord 10

Misschien handig voor anderen die deze thread vinden. Onderstaande code werkt alleen als je al jQuery gebruikt. De functie retourneert altijd een identifier. Als het element geen identifier heeft, genereert de functie de identifier en voegt deze toe aan het element.

var generatedIdCounter = 0;
$.fn.id = function() {
    var identifier = this.attr('id');
    if(!identifier) {
        generatedIdCounter++;
        identifier = 'isGenerated_' + generatedIdCounter;
        this.attr('id', identifier);
    }
    return identifier;
}

Hoe te gebruiken:

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

Antwoord 11

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

Met bovenstaande code kun je een id krijgen.

Antwoord 12

Dit is een oude vraag, maar vanaf 2015kan dit echt werken:

$('#test').id;

En je kunt ook opdrachten maken:

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

Zolang u de volgende JQuery-plug-in definieert:

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

Interessant, als elementeen DOM-element is, dan:

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

Antwoord 13

Aangezien de ideen attribuut is, kunt u deze verkrijgen door de attrmethode te gebruiken.

Antwoord 14

Dit kan element id , class zijn of automatisch met even

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

Antwoord 15

Dit zal eindelijk je problemen oplossen:

laten we zeggen dat je veel knoppen op een pagina hebt en dat je er een wilt wijzigen met jQuery Ajax (of niet ajax), afhankelijk van hun ID.

laten we ook zeggen dat je veel verschillende soorten knoppen hebt (voor formulieren, voor goedkeuring en voor soortgelijke doeleinden), en dat je wilt dat de jQuery alleen de “vind ik leuk”-knoppen behandelt.

hier is een code die werkt:
de jQuery zal alleen de knoppen behandelen die van de klasse .cls-hlpb zijn,
het neemt de id van de knop waarop is geklikt
en zal het veranderen volgens de gegevens die van de ajax komen.

<!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 is gemaakt van W3schools en gewijzigd.

16

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

Antwoord 17

het beantwoordt de OP niet, maar kan interessant zijn voor anderen: u kunt in dit geval het veld .idopenen:

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