jQuery select ancêtre
c'Est possible d'utiliser jQuery pour sélectionner un ancêtre d'un élément?
Syntaxe:
<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)
});
6 réponses
parent()
pour l'élément parent immédiat.
$(".click-me").click(function() {
var ancestor = $(this).parent();
alert(ancestor)
});
Ou parents()
pour tous les éléments ancêtres.
$(".click-me").click(function() {
var ancestors = $(this).parents(".some-ancestor");
alert(ancestors)
});
Ou closest()
pour le premier élément de correspondance le plus proche (un ancêtre ou soi).
$(".click-me").click(function() {
var ancestor = $(this).closest(".some-ancestor");
alert(ancestor)
});
La différence entre parents()
et closest()
est subtil mais important. closest()
retournera l'élément courant si it is a match; parents()
retourne seuls les ancêtres. Vous êtes nombreux à ne pas vouloir la possibilité de retourner l'élément actuel. closest()
renvoie aussi un seul élément;parents()
retourne tous les éléments correspondants.
vous voulez dire quelque chose comme ça?
$('.click-me').click(function() {
var $theAncestor = $(this).closest('#ancestor-1');
}
ceci va chercher à travers tous les ancêtres jusqu'à ce qu'une correspondance soit trouvée.
http://api.jquery.com/closest/
EDIT:
Jérôme, votre question peut être interprétée de plusieurs façons. Cela témoigne de la puissance et de la souplesse de jQuery.
Veuillez considérer ce qui suit.
tout d'Abord, pour répondre à votre question, oui, il est possible d'utiliser jQuery pour sélectionnez un ancêtre d'un élément.
je pense que nous pouvons supposer que vous êtes au courant de la capacité de jQuery à sélectionner n'importe quel élément, qu'il s'agisse d'un ancêtre ou d'un descendant via:
$('#myElement')
compte tenu de la sur-moi exemple, si vous souhaitez avoir un ensemble d'un élément ancêtres retournée, utilisez:
$(this).parents()
ou
$(this).parents(selector)
mais sachez que cela traversera tous les ancêtres retournant tout, ou tout ce qui correspond quand un sélecteur est donné.
Si vous souhaitez avoir le parent immédiat retournée, utilisez:
$(this).parent()
si vous savez de quel ancêtre vous avez besoin, utilisez:
$(this).closest(selector)
Mais sachez qu'il ne reviendra que le premier match, et si l'élément courant (ce) est une correspondance, il sera de retour.
j'espère que cette aide.
essayez d'utiliser parents() ou le plus proche() en combinaison, peut-être, avec un sélecteur pour déterminer quel ancêtre devrait correspondre. Par exemple, trouvez le div ancêtre le plus proche avec un id.
$('.click-me').click( function() {
var ancestorId = $(this).closest('div[id]');
alert(ancestorId);
});
vous cherchez parent()
? jQuery Doc pour le sélecteur parent. Si c'est différent pour votre scénario d'expliquer quel est votre sortie attendue.
http://api.jquery.com/parent/ et http://api.jquery.com/parents/
$(".click-me").click(function(){
var ancestorId = $(this).parent().parent();
alert(ancestorId)
});
retour de la balise div avec l'id
Ça dépend vraiment de ce que vous voulez atteindre. Voulez-vous rechercher tous les ancêtres quelle que soit la classe utilisée? Ou voulez-vous rechercher tous les éléments qui sont des ancêtres et ont une certaine classe (ancêtre-x dans votre cas)?
si vous voulez faire du vélo à travers un ancêtre, utilisez simplement .parent () (il y a un excellent exemple de cycle à travers tous les éléments) ou .les parents() qui pouvez-vous utiliser de la forme:
$(".click-me").click(function(){
var parentElements = $(this).parents().map(function () {
return this.tagName;
})
// whatever else you want to do with it
});
Probablement le meilleur approche serait d'utiliser .parents()
jusqu'à ce que vous arriviez à l'élément avec une certaine id ou classe. Cela dépend vraiment de ce que vous voulez faire.