JQUERY, trouver placard id?

Question

<ul id="containerA" class="container"> 
     <li> 
     <span class="sportsType" id="football">Football</span> 
      <ul> 
       <li class="sportsMatch"> 
       <img src="/static/img/arrow_left.png" class="subArrow"/>A vs B <img src="/static/img/arrow_left.png" class="star"/> 
       </li> 

Lorsque vous cliquez sur le fichier PNG avec l'étoile de classe, je veux retourner le plus haut ul (conteneurA). Je pourrais utiliser .parent.parent.parent etc, mais il a aussi besoin de travailler avec un autre ensemble de listes qui nest pas tout aussi complexe:

<ul id="containerB" class="container"> 
<li class="sportsMatch"> 
<img src="/static/img/arrow_left.png" class="subArrow"/>A vs B <img src="/static/img/arrow_left.png" class="star"/> 
</li> 

Voici mon JScript, que puis-je mettre dedans pour obtenir l'identifiant du conteneur de placard?

$(".star").click(function() {} 

Answer 1

Vous allez vouloir utiliser .closest pour trouver le plus proche anscestor de l'élément clicked (this intérieur du gestionnaire d'événements). Si vous voulez que le id du conteneur, vous pouvez utiliser attr ou prop, ou accéder à l'élément DOM directement et accéder à la id propriété (comme @ sg3s souligne dans son commentaire):

$(".star").click(function() { 
    var $container = $(this).closest(".container"), 
     containerId = $container.attr("id"); 
}); 

Exemple:http://jsfiddle.net/L7JyY/

Answer 2

Depuis que vous avez demandé le plus haut, il blesse comme il pourrait y avoir plus d'un objet avec class="container" dans la hiérarchie ancesotor. Si tel est le cas, alors vous feriez ceci:

$(".star").click(function() { 
    var topContainer = $(this).parents(".container").last(); 
} 

Si vous voulez que l'ancêtre le plus proche avec class="container" (par exemple, pas le plus en haut, mais celui qui est le plus proche du clic sur l'objet) ou il y a ne va jamais être un ancêtre avec class="container", alors vous feriez ce qui est un peu plus simple:

$(".star").click(function() { 
    var container = $(this).closest(".container"); 
} 

Answer 3

utilisez le closest method pour obtenir l'élément, utilisez la méthode attr pour obtenir l'ID:

var ul = $(this).closest('.container'); 
var id = ul.attr('id'); 

Answer 4

Si l'UL a toujours une classe « contenant » et s'il n'y a pas d'autre élément avec la même classe entre le PNG et que vous pouvez le faire

$(".star").click(function() { 
    $(this).closest('.container') 
}) 

Answer 5

Cela vous apportera le premier parent ascendant correspondant au sélecteur:

$(".star").click(function() { 
    $(this).parentsUntil(".container").parent(); 
} 

http://api.jquery.com/parentsUntil/