jQuery select ancestor

Question

È possibile utilizzare jQuery per selezionare un antenato di un elemento?

Markup:

<div id="ancestor-1"> 
    <div> 
     <a href="#" class="click-me">Click me</a> 
    </div> 
</div> 
<div id="ancestor-2"> 
    <div> 
     <a href="#" class="click-me">Click me</a> 
    </div> 
</div> 

Script:

$(".click-me").click(function(){ 
    // var ancestorId = ???; 
    alert(ancestorId) 
}); 

Answer 1

Stai cercando parent()? jQuery Doc per il selettore genitore. Se è diverso per il tuo scenario, spiega qual è il tuo output previsto.

Answer 2

Vuoi dire qualcosa del genere?

$('.click-me').click(function() { 
    var $theAncestor = $(this).closest('#ancestor-1'); 
} 

Questo cercherà attraverso tutti gli antenati fino a quando non viene trovata una corrispondenza.

http://api.jquery.com/closest/

EDIT:

Girolamo, la tua domanda può essere interpretata in diversi modi. Questo parla della potenza e della flessibilità di jQuery.

Si prega di considerare quanto segue.

In primo luogo, per rispondere alla domanda, sì, è possibile utilizzare jQuery per selezionare un antenato di un elemento.

penso che possiamo supporre che siete a conoscenza della capacità di jQuery per selezionare qualsiasi elemento, se antenato o discendente tramite:

$('#myElement') 

Dato il click-me ad esempio, se si desidera avere un insieme di tutti gli antenati di un elemento restituito, uso:

$(this).parents() 

o

$(this).parents(selector) 

Ma sii consapevole che questo attraverserà TUTTI gli antenati che ritornano tutti, o tutti quelli che corrispondono quando viene dato un selettore.

Se si desidera avere il padre immediato restituito, uso:

$(this).parent() 

Se si sa quale antenato è necessario, l'uso:

$(this).closest(selector) 

ma essere consapevoli che verrà restituito solo il prima partita, e se l'elemento corrente (questo) è una corrispondenza, lo restituirà.

Spero che questo aiuti.

Answer 3

Provare parent() per l'elemento padre immediato.

$(".click-me").click(function() { 
    var ancestor = $(this).parent(); 
    alert(ancestor) 
}); 

O parents() per tutti gli elementi antenati corrispondenti.

$(".click-me").click(function() { 
    var ancestors = $(this).parents(".some-ancestor"); 
    alert(ancestors) 
}); 

O closest() per l'elemento corrispondente prima più vicino (un antenato o di auto).

$(".click-me").click(function() { 
    var ancestor = $(this).closest(".some-ancestor"); 
    alert(ancestor) 
}); 

La differenza tra parents() e closest() è sottile ma importante. closest() restituirà l'elemento corrente se è una corrispondenza; parents() restituisce solo antenati. Molti non vogliono la possibilità di restituire l'elemento corrente. closest() restituisce anche solo un elemento; parents() restituisce tutti gli elementi corrispondenti.

Answer 4

http://api.jquery.com/parent/ e http://api.jquery.com/parents/

$(".click-me").click(function(){ 
    var ancestorId = $(this).parent().parent(); 
    alert(ancestorId) 
}); 

sarebbero tornati i div con gli ID

Answer 5

Provare a utilizzare i genitori (o) più vicino() in combinazione, forse, con un selettore per determinare quale antenato deve corrispondere. Ad esempio, trova il div antenato più vicino con un id.

$('.click-me').click(function() { 
     var ancestorId = $(this).closest('div[id]'); 
     alert(ancestorId); 
}); 

Answer 6

Dipende davvero da ciò che si desidera ottenere. Vuoi cercare tutti gli antenati indipendentemente dalla classe utilizzata? O vuoi cercare tutti gli elementi che sono antenati e avere una certa classe (antenato-x nel tuo caso)?

Se si vuole passare eventuali antenati, è sufficiente utilizzare .parent() (c'è un ottimo esempio di come per scorrere tutti gli elementi) oppure .parents() che è possibile utilizzare come:

$(".click-me").click(function(){ 
    var parentElements = $(this).parents().map(function() { 
     return this.tagName; 
    }) 
    // whatever else you want to do with it 
}); 

Probabilmente l'approccio migliore sarebbe quello di usa .parents() finché non arrivi all'elemento con un determinato ID o classe. Dipende davvero da cosa vuoi fare.