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)
});
28
demandé sur Keavon 2010-02-04 18:19:59

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.

43
répondu Ryan McGeary 2010-02-05 21:35:57

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.

11
répondu user113716 2010-02-05 19:41:58

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);
});
2
répondu tvanfosson 2010-02-04 15:27:36

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.

0
répondu Teja Kantamneni 2010-02-04 15:21:30

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

0
répondu harpax 2010-02-04 15:23:32

Ç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.

0
répondu Ondrej Slinták 2010-02-04 15:47:55