Comment puis-je obtenir l'ID d'un élément en utilisant jQuery?
<div id="test"></div>
<script>
$(document).ready(function() {
alert($('#test').id);
});
</script>
Pourquoi ce qui précède ne fonctionne-t-il pas et comment dois-je procéder?
La manière jQuery:
$('#test').attr('id')
Dans votre exemple:
<div id="test"></div>
$(document).ready(function() {
alert($('#test').attr('id'));
});
Ou à travers les DOM:
$('#test').get(0).id;
ou même :
$('#test')[0].id;
et raison derrière l'utilisation de $('#test').get(0) dans JQuery ou même $('#test')[0] est que $('#test') est un sélecteur JQuery et renvoie un tableau () de résultats pas un seul élément par sa fonctionnalité par défaut
une alternative pour le sélecteur DOM dans jQuery est
$('#test').prop('id')
qui est différent de .attr() et $('#test').prop('foo') saisit la propriété DOM foo spécifiée, tandis que $('#test').attr('foo') saisit l'attribut HTML foo spécifié et vous permet de trouver plus de détails sur les différences. ici .
$('selector').attr('id') retournera l'identifiant du premier élément correspondant. référence .
Si votre ensemble correspond à plusieurs éléments, vous pouvez utiliser le conventionnel .eachitérateur pour renvoyer un tableau contenant chacun des identifiants:
var retval = []
$('selector').each(function(){
retval.Push($(this).attr('id'))
})
return retval
Ou, si vous êtes prêt à gagner un peu plus, vous pouvez éviter le wrapper et utiliser le .mapraccourci .
return $('.selector').map(function(index,dom){return dom.id})
id est une propriété d'un fichier HTML Element. Cependant, lorsque vous écrivez $("#something"), il retourne un objet jQuery qui encapsule le ou les éléments DOM correspondants. Pour récupérer le premier élément DOM correspondant, appelez get(0)
$("#test").get(0)
Sur cet élément natif, vous pouvez appeler id, ou toute autre propriété ou fonction DOM native.
$("#test").get(0).id
C'est la raison pour laquelle id ne fonctionne pas dans votre code.
Vous pouvez également utiliser la méthode attr de jQuery comme le suggèrent d'autres réponses pour obtenir l'attribut id du premier élément correspondant.
$("#test").attr("id")
Les réponses ci-dessus sont excellentes, mais à mesure que jQuery évolue, vous pouvez également effectuer les tâches suivantes:
var myId = $("#test").prop("id");
$.fn.extend({
id : function() {
return this.attr('id');
}
});
alert( $('#element').id() );
Certains codes de vérification requis bien sûr, mais facilement implémentés!
.id n'est pas une fonction jquery valide. Vous devez utiliser la fonction .attr() pour accéder aux attributs que possède un élément. Vous pouvez utiliser .attr() pour modifier une valeur d'attribut en spécifiant deux paramètres ou obtenir la valeur en en spécifiant un.
Si vous souhaitez obtenir un identifiant d'élément, par exemple avec un sélecteur de classe, lorsqu'un événement (dans ce cas, un événement click) a été déclenché sur cet élément spécifique, les tâches suivantes feront l'affaire:
$('.your-selector').click(function(){
var id = $(this).attr('id');
});
Eh bien, il semble qu’il n’y ait pas eu de solution et aimerais proposer ma propre solution qui est une extension du prototype de JQuery. Je mets cela dans un fichier d'assistance chargé après la bibliothèque JQuery, d'où la vérification de 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');
}
}
}
Ce n'est peut-être pas parfait, mais c'est peut-être un début d'inclusion dans la bibliothèque JQuery.
Retourne une valeur de chaîne unique ou un tableau de valeurs de chaîne. Le tableau de valeurs de chaîne est pour l'événement un sélecteur à éléments multiples a été utilisé.
$('#test') renvoie un objet jQuery, vous ne pouvez donc pas utiliser simplement object.id pour obtenir son Id
vous devez utiliser $('#test').attr('id'), qui retourne votre ID requis de l'élément
Cela peut aussi être fait comme suit,
$('#test').get(0).id qui est égal à document.getElementById('test').id
$('#test').attr('id') Dans votre exemple:
<div id="test"></div>
$(document).ready(function() {
alert($('#test').attr('id'));
});
Peut-être utile pour les autres qui trouvent ce fil. Le code ci-dessous ne fonctionnera que si vous utilisez déjà jQuery. La fonction retourne toujours un identifiant. Si l'élément n'a pas d'identifiant, la fonction génère l'identifiant et l'ajoute à l'élément.
var generatedIdCounter = 0;
$.fn.id = function() {
var identifier = this.attr('id');
if(!identifier) {
generatedIdCounter++;
identifier = 'isGenerated_' + generatedIdCounter;
this.attr('id', identifier);
}
return identifier;
}
Comment utiliser:
$('.classname').id();
$('#elementId').id();
Ceci est une vieille question, mais à partir de 2015 cela peut réellement fonctionner:
$('#test').id;
Et vous pouvez également faire des missions:
$('#test').id = "abc";
Tant que vous définissez le plugin JQuery suivant:
Object.defineProperty($.fn, 'id', {
get: function () { return this.attr("id"); },
set: function (newValue) { this.attr("id", newValue); }
});
Fait intéressant, si element est un élément DOM, alors:
element.id === $(element).id; // Is true!
$('tagname').attr('id');
En utilisant le code ci-dessus, vous pouvez obtenir un identifiant.
Cela peut être id d'élément, classe, ou automatiquement en utilisant même
------------------------
$(this).attr('id');
=========================
------------------------
$("a.remove[data-id='2']").attr('id');
=========================
------------------------
$("#abc1'").attr('id');
=========================
<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));
}
}
?>
Cela résoudra finalement vos problèmes:
disons que vous avez plusieurs boutons sur une page et que vous souhaitez en modifier un avec jQuery Ajax (ou non ajax) en fonction de leur ID.
disons également que vous avez différents types de boutons (pour les formulaires, pour l'approbation et à des fins similaires), et que vous voulez que jQuery ne traite que les boutons "similaires".
voici un code qui fonctionne: jQuery ne traitera que les boutons de la classe .cls-hlpb, il prendra l'identifiant du bouton sur lequel vous avez cliqué et le modifiera en fonction des données provenant de l'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>
le code a été pris de w3schools et changé.
Comme id est un attribut, vous pouvez l'obtenir en utilisant la méthode attr.
Important: si vous créez un nouvel objet avec jQuery et liez un événement, vous DEVEZ utilisez prop et non attr , comme ceci:
$("<div/>",{ id: "yourId", class: "yourClass", html: "<span></span>" }).on("click", function(e) { alert($(this).prop("id")); }).appendTo("#something");
il ne répond pas au PO, mais peut intéresser d’autres: vous pouvez accéder au champ .id dans ce cas:
$('#drop-insert').map((i, o) => o.id)