Comment cacher un élément parent en utilisant jquery?

Question

Supposons que le code HTML suivant:

<li class="fooli"> 
    <a class="foo" href="javascript:foo(this);">anchor</a> 
</li> 
<li class="fooli"> 
    <a class="foo" href="javascript:foo(this);">anchor</a> 
</li> 

et le code JavaScript suivant (en utilisant jquery 1.3.2):

function foo(anchor) { 
    alert($(anchor).attr('href')); 
} 

Mon objectif est d'être en mesure de cacher la li qui est cliqué, mais je Impossible de leur attribuer des ID uniques. Ainsi, je veux le faire positionnellement (c'est-à-dire identifier l'ancre particulière sur laquelle on a cliqué) par quelque chose comme $ (ancre) .parent(). Hide().

Cependant, l'alerte ci-dessus renvoie "indéfini", donc il n'est pas évident pour moi que j'ai même le bon objet jquery.

Comment puis-je savoir quel est l'objet $ (ancre)? En particulier, comment vois-je les attributs, la classe, l'élément HTML, etc?

Answer 1

Tu ne peux pas le faire:

$(function() { 
    $("a.foo").click(function() { 
    $(this).parent().hide(); 
    return false; 
    }); 
}); 

avec:

<li class="fooli"><a class="foo" href="#">anchor</a></li> 
<li class="fooli"><a class="foo" href="#">anchor</a></li> 

Answer 2

$(...) jQuery est jamais un seul élément HTML; c'est toujours une liste d'entre eux.

Vous pouvez utiliser .get() convertir à une liste régulière Javascript ou, mieux, utiliser .each():

$(anchor).each(function() { alert(this) }); 

Cela vous donnera quelque chose comme [object HTMLAElement]. Vous devrez utiliser for/in pour l'examiner entièrement, mais .tagName et .innerHTML sont probablement assez bon pour savoir où vous êtes.

J'aime aussi utiliser $(...).css('outline', '1px solid lime') pour trouver des éléments. Cela les rend difficiles à manquer et faciles à identifier avec Firebug.

Addendum: Je suis définitivement d'accord avec la réponse ci-dessus sur la séparation de votre Javascript de votre HTML. Ne pas inline JS.