JQuery: Ottenere l'elemento principale id di un elemento cliccato

Question

Ho un div come questo:

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

Quando clicco su 'x' (Voglio correre una funzione jquery chiamato disablePopup(id); dove id è il id del coresponding popupDiv (ho molti popupDiv ciascuno con il proprio tasto X.

al fine di farlo ho implementato il seguente

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

basicaly ottengo l'id del popupCloseCl il culo ha fatto clic quindi ho ottenuto l'id del suo genitore (il corrispondente popupDiv) tramite il metodo più vicino. quindi chiamo disablePopup.

Ma questo non funziona.

Ho persino provato a utilizzare il metodo var buttonID = $(buttonID).parent().attr("id"); ma non ha funzionato neanche.

Ho anche provato var id = this.id;

Qualsiasi aiuto è molto apprezzato

Grazie

Answer 1

invece di usare closest è possibile utilizzare parent come questo ...

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

Avviso è possibile utilizzare la parola chiave this fare riferimento l'elemento che ha dato il via l'evento. Come hai fatto, stai usando il valore di buttonID come selettore di elementi che avrebbe un valore di "popupDivClose" e senza aggiungere uno # all'inizio non cercherà un ID, ma piuttosto un elemento di tag chiamato "popupDivClose".

Se si voleva continuare a utilizzare buttonID si potrebbe avere utilizzato questa riga di codice per farlo funzionare ...

var id = $("#" + buttonID).parent().attr("id"); 

Tuttavia, avrei preferito di scrivere l'intero evento in questo modo ...

$(".popupCloseClass").click(function (event) { 
    event.preventDefault(); 

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

    disablePopup(id); 
}); 

avviso l'uso di event.preventDefault(); questo assicurerà che il browser non elaborerà l'azione naturale per un clic del collegamento (cioèpagina di navigazione) - anche se, in Chrome, almeno, è necessario specificare un valore href per la navigazione in ogni caso

Here is a working example

Answer 2

Si dovrebbe fare

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

(si potrebbe anche usare $(this).parent().attr("id");) ma utilizzando più vicino è più sicuro in caso cambi la tua struttura html

Answer 3

Questo funziona bene:

$('a.popupCloseClass').click(function() { 
    var id = $(this).parent().attr('id'); 
});​ 

JSFiddle Demo

È dovresti semplicemente usare this invece del modo in cui stai ricevendo l'ID e poi provare a usarlo come selettore (mancava il # bef ORE l'ID):

Answer 4

Questo deve lavorare:

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