JQuery: Obtenir l'élément parent de l'id d'un élément cliqué

J'ai un div comme ceci:

<div id="popupDiv1" class="popupDivClass">
    <a id="popupDivClose" class="popupCloseClass">x</a>
</div>

Quand je clique sur le " x " (je veux exécuter une fonction jquery appelé disablePopup(id); où id est l'id de la correspondate popupDiv (j'ai beaucoup de popupDiv, chacun avec son propre bouton X.

pour ce faire j'ai mis en application les

$(".popupCloseClass").click(function (event) {
    var buttonID = $(event.target).attr("id");
    var id = $( buttonID).closest("div").attr("id");
disablePopup(id);
});

fondamentalement je obtenir l'id de la popupCloseClass cliqué puis-je obtenir l'id de celle du parent (le correspondant popupDiv) via le plus proche de la méthode. puis-je appeler disablePopup.

Mais ce n'est pas de travail.

J'ai même essayé d'utiliser le var buttonID = $(buttonID).parent().attr("id"); méthode, mais n'a pas fonctionné non plus.

J'ai aussi essayé var id = this.id;

Toute aide est grandement appréciée

Grâce

buttonID contiendra la chaîne "popupDivClose". Si vous passez ce de jQuery, il va rechercher tous les éléments avec la balise nom popupDivClose. Les sélecteurs d'ID commence par un #. Mais depuis event.target (ou même this) déjà pointez sur l'élément que vous souhaitez, il suffit d'utiliser $(event.target).closest(...)... ou $(this).closest(...).... Je vous recommande de lire quelques-uns plus de tutos jQuery...

OriginalL'auteur Youssef | 2012-03-29

13

au lieu d'utiliser closest vous pouvez utiliser parent comme ça...
```
var id = $(this).parent().attr("id");
```
D'avis, vous pouvez utiliser le this mot-clé pour faire référence à l'élément qui a débuté l'événement. Comme vous l'avez, vous êtes à l'aide de la valeur de buttonID que le sélecteur d'élément qui aurait une valeur de "popupDivClose" et sans l'ajout d'un # au début il ne sera pas à la recherche d'un ID, mais plutôt une balise de l'élément appelé "popupDivClose".

Si vous vouliez continuer à utiliser buttonID vous pourriez avoir utilisé cette ligne de code pour le faire fonctionner...
```
var id = $("#" + buttonID).parent().attr("id");
```
Cependant, j'aurais préféré écrire la totalité de l'événement comme si...
```
$(".popupCloseClass").click(function (event) {
    event.preventDefault();

    var id = $(this).parent().attr("id");

    disablePopup(id);
});
```
notez l'utilisation de event.preventDefault(); cela permettra d'assurer que le navigateur ne sera pas le processus de l'action naturelle d'un lien à cliquer (c'est à dire de navigation de la page) - si, au Chrome, au moins, vous devez spécifier un href valeur pour la navigation de toute façon

Voici un exemple de travail

Merci beaucoup pour les explications très claires

OriginalL'auteur musefan

Cela doit fonctionner:

$(".popupCloseClass").click(function (event) 
{
    var buttonID = $(this).parent().attr('id');
    disablePopup(buttonID);
});

OriginalL'auteur pascalvgemert

0

Que vous devriez faire
```
$(".popupCloseClass").click(function (event) {
    var id = $(this).closest("div").attr("id");
});
```
(vous pouvez également utiliser $(this).parent().attr("id"); ) mais en utilisant la plus proche est plus sûr en cas de modification de votre structure html

Notez que parent() ne reviendra que le parent immédiat et, par conséquent, le sélecteur de paramètre est inutile. vous pouvez cependant utiliser parents(selector) qui va prendre un sélecteur et retour tous les parents (tout le chemin jusqu'à l'arbre) qui correspondent au sélecteur
oui c'inutile, dans mon expérience, il est préférable de l'utiliser le plus proche() parce que vous finissent généralement par la modification de votre code html et de briser le code qui utilise parent()
Un bon point à faire, certainement quelque chose pour examen. Cependant, je suis encore d'avoir brisé mon code de cette façon... et là encore, je n'utilise pas ce type de fonctionnalité, trop souvent, de toute façon

OriginalL'auteur Nicola Peluchetti
0

Cela fonctionne bien:
```
$('a.popupCloseClass').click(function() {
    var id = $(this).parent().attr('id');
});
```
JSFiddle Démo

Vous devriez utiliser this au lieu de la façon dont vous êtes l'obtention de l'ID et tenter ensuite de l'utiliser comme un sélecteur (vous avez été absent de la # avant de l'ID):

OriginalL'auteur Richard Dalton

Vous devez vous connecter pour publier un commentaire.