J'ai cette petite page HTML qui expose mon problème. Je veux obtenir l'id du premier ancêtre de mon élément d'entrée ( # input-1 ). Lorsque l'utilisateur change la valeur de l'option, le code JavaScript doit obtenir l'id de l'élément # li-1 et l'afficher. Malheureusement, tout ce que j'obtiens est un indéfini et je ne sais pas pourquoi.
La fonction parents () devrait parcourir l'arborescence DOM et trouver le li , puis récupérez l'identifiant via la fonction .attr ()
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<li id="li-1">
<div class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Test</div>
<div class="item-input-wrap">
<select id="input-1">
<option value="0">test0</option>
<option value="1">test1</option>
</select>
</div>
</div>
</div>
</li>
</body>
</html>
$("#input-1").on("change", function(elem) {
var id = $(elem).parents("li").attr("id");
alert(id);
})
5 Réponses :
Vous devez utiliser .closest()
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li id="li-1">
<div class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Test</div>
<div class="item-input-wrap">
<select id="input-1">
<option value="0">test0</option>
<option value="1">test1</option>
</select>
</div>
</div>
</div>
</li> De plus, il n'est pas nécessaire d'utiliser elem dans ce cas, juste utilisez this dans $(this)
$("#input-1").on("change", function(elem) {
console.log($(elem.target).closest("li").attr("id"))
var id = $(this).closest("li").attr("id");
alert(id);
})
$("#input-1").on("change", function(){
var id = $(this).closest("li").attr("id");
alert(id);
})
si j'utilise le plus proche en utilisant la variable "elem" cela ne fonctionne pas. Avec "ça" ça marche
@GianlucaGhettini Dans votre cas, elem est l'événement. vous pouvez donc utiliser elem.target pour obtenir l'élément avec lequel vous faites quelque chose, comme ceci: $ (elem.target) .closest ("li"). attr ("id") < / code>
Vous devez utiliser ce mot-clé
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<li id="li-1">
<div class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Test</div>
<div class="item-input-wrap">
<select id="input-1">
<option value="0">test0</option>
<option value="1">test1</option>
</select>
</div>
</div>
</div>
</li>
</body>
</html>
$("#input-1").on("change", function(elem) {
var id = $(this).parents('li').attr('id');
console.log(id);
})
$(this).parents('li').attr('id')
D'accord, merci. Alors pourquoi avec "elem" ça ne marche pas? Je pensais que "elem" serait l'élément qui émet l'événement de changement
elem vous renverra l'élément entier. seul this renverra l'élément cible. Si vous imprimez les deux, vous verrez la différence ce que je dis.
@Dood elem renvoie l'événement. s'il veut l'élément, il peut utiliser elem.target
Je conseille vraiment d'arrêter d'utiliser jQuery pour des opérations aussi simples, et d'apprendre comment fonctionne le DOM . Voici la solution Javascript vanille simple, que je considère tellement plus propre.
Ce qui est implicitement transmis à un écouteur d'événement est le Objet événement qui le déclenche.
Si vous avez besoin d'accéder à l'élément sur lequel l'événement s'est produit, utilisez une fonction ES5 (comme dans mon exemple de code) et accédez à l'élément à l'intérieur de la fonction de gestionnaire en utilisant this , ou utilisez une fonction de flèche ES6 ( (event) => {/ * ... * /} ), puis accédez à l'élément en utilisant event.target dans la fonction du gestionnaire.
Veuillez noter que le Le code HTML que vous avez affiché est en fait invalide , car li ne peut pas exister sans un parent ul ou ol . p>
({target: elem}) => { /* ... */ }
<ul>
<li id="li-1">
<div class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Test</div>
<div class="item-input-wrap">
<select id="input-1">
<option value="0">test0</option>
<option value="1">test1</option>
</select>
</div>
</div>
</div>
</li>
</ul>
Avec ES6, vous pouvez même déstructurer l'objet d'événement transmis implicitement comme ceci:
document.getElementById('input-1').addEventListener('change', ({target: elem})=>{
console.log(elem.closest('li').id);
})
<ul>
<li id="li-1">
<div class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Test</div>
<div class="item-input-wrap">
<select id="input-1">
<option value="0">test0</option>
<option value="1">test1</option>
</select>
</div>
</div>
</div>
</li>
</ul>
document.getElementById('input-1').addEventListener('change', function(event) {
console.log(this.closest('li').id);
}) Ce que cela fait: Cela dit de l'objet passé à cette fonction, obtenez-moi la propriété target et rendez-la disponible en tant que elem dans la fonction .
déclarer cette méthode dans le script et appeler un changement de liste déroulante
`function GetId(){ alert($('#input-1option:selected').attr("value"));}`
si cela ne fonctionne pas, veuillez vérifier la bibliothèque jquery ou la remplacer par celle donnée CDN
Mohit Je vous conseille de relire la question, l'OP ne cherche pas un moyen d'obtenir la valeur de l'option sélectionnée, mais l'identifiant du parent li . Deuxièmement, votre pourrait ne pas fonctionner car il n'y a aucun élément avec l'id # input-1option
Utilisez .closest () ou parent () Vous devriez obtenir le parent de # input-1 et non l'élément select
$("#input-1").on("change", function(){
var id = $(this).parents('li').attr('id');
alert(id);
})
ou
$("#input-1").on("change", function(){
var id = $(this).closest('li').attr('id');
alert(id);
})